JS创建事件的三种方法(实例代码)


Posted in Javascript onMay 12, 2016

1.普通的定义方式

<input type="button" name="Button" value="确定" 
onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 ');
if(Sfont=='红色'){

form1.style.fontFamily='黑体';


form1.style.color='red';
}"
/>

这是最常见的一种定义方式,直接将JS事件定义在需要的对象之上。相关的变形就是调用方法的形式,如下

<script>
  function show()
    {
      alert("show");
    }
</script>
<input type="button" name="show" onclick="show()"/>

第二种

<script type="text/javascript" for="window" event="onload">
  alert("Welcome!");
</script>
<script type="text/javascript" for="window" event="onunload">
  alert("Thanks!");
</script>

这里定义了加载窗口和卸载窗口时的发生的操作。

如果是针对其他对象的事件,只需要修改for属性的值为对象名,event修改为监视的的事件。如下:

<script type="text/javascript" for="test" event="onclick">
alert("button!");
</script>

第三种:

<input type="button" name="test" value="test"/>
<script>
function te()
{
  alert("test");
}
test.onclick=te;
</script>

这里我们使用注册的形式,将方法注册到指定对象的指定事件。使用对象名来调用。

完整测试代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript" for="window" event="onload">
alert("Welcome!");
</script>
<script type="text/javascript" for="window" event="onunload">
alert("Thanks!");
</script>
<form name="form1" method="post" action="">
JS很好学
</form>
<formn ame="form2" method="post" action="">
<input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 ');if(Sfont=='红色'){form1.style.fontFamily='黑体';form1.style.color='red';}"/>
<input type="button" name="test" value="test"/>
<script>
function te()
{
alert("test");
}
test.onclick=te;
</script>

</form>
</body>
</html>

以上这篇JS创建事件的三种方法(实例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
js实现简单模态框实例
Nov 16 Javascript
jQuery判断checkbox选中状态
May 12 #Javascript
Bootstrap3制作自己的导航栏
May 12 #Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 #Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 #Javascript
分享12个非常实用的JavaScript小技巧
May 11 #Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 #Javascript
Bootstrap组件(一)之菜单
May 11 #Javascript
You might like
PHP会话处理的10个函数
2015/08/11 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
js继承实现方法详解
2016/12/16 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
一篇不错的Python入门教程
2007/02/08 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python转换时间的图文方法
2019/07/01 Python
浅析python redis的连接及相关操作
2019/11/07 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
师范大学应届生求职信
2013/11/21 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
房地产开发项目建议书
2014/05/16 职场文书
美术社团活动总结
2014/06/27 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
幼儿教师个人总结
2015/02/05 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
个人求职意向书
2015/05/11 职场文书