javascript中注册和移除事件的4种方式


Posted in Javascript onMarch 20, 2013

对于html中的一些元素注册事件的方式有多种
第一种:

<script> 
function test() 
{ 
alert("OK"); 
} 
</script> 
<a href="#" onclick="test()">测试</a>

第二种:
<a href="#" id="a">测试</a> 
<script> 
function test() 
{ 
alert("OK"); 
} 
var x=document.getElementById("a"); 
x.onclick=test;//注意没有() 
</script>

第三种(W3C模型):
<a href="#" id="a">测试</a> 
<script> 
function test() 
{ 
alert("OK"); 
} 
var x=document.getElementById("a"); 
x.addEventListener("click",test,false); 
</script>

其中addEventListener()三个参数中,第一个表示什么事件类型,注意没有on,第二个指定方法,第三个是标示是事件冒泡(true)还是事件捕获(false),涉及到从下到上还是从上到下的事件发生顺序。
移除事件的方法时removeEventListener(),其中参数和addEventListener()一样。
这种模式在IE浏览器中会报错,在chrome中正常执行。

第四种(微软模型):

<a href="#" id="a">测试</a> 
<script> 
function test() 
{ 
alert("OK"); 
} 
var x=document.getElementById("a"); 
x.attachEvent("onclick",test); 
</script>

其中attachEvent()两个参数中,第一个表示什么事件类型,注意带on,第二个指定方法。
移除事件的方法是detachEvent(),其中参数和attachEvent()一样。
Javascript 相关文章推荐
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 #Javascript
jQuery实现id模糊查询的小例子
Mar 19 #Javascript
JS文本框不能输入空格验证方法
Mar 19 #Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 #Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 #Javascript
input输入框的自动匹配(原生代码)
Mar 19 #Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 #Javascript
You might like
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
分享一个asp.net pager分页控件
2012/01/04 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
js日期联动示例
2014/05/02 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python二分法搜索算法实例分析
2015/05/11 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
python实现学生通讯录管理系统
2021/02/25 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
大学生就业自我鉴定
2013/10/26 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
质检部经理岗位职责
2014/02/19 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
如何基于python实现单目三维重建详解
2022/06/25 Python