onclick与addEventListener区别
2018-01-26 13:17
1171 查看
这次做项目遇到了这个问题,本来习惯性的每次都写的是addEventListener绑定click事件。但是当用addEventListener绑定了多次click事件的时候,引发了我的思考,这两者有区别吗?
结论:
1.onclick事件在同一时间只能指向唯一对象
2.addEventListener给一个事件注册多个listener
3.addEventListener对任何DOM都是有效的,而onclick仅限于HTML
4.addEventListener可以控制listener的触发阶段,(捕获/冒泡)。对于多个相同的事件处理器,不会重复触发,不需要手动使用removeEventListener清除
5.IE9使用attachEvent和detachEvent
探究:
onclick用法:
functionRef是一个函数,通常是在别处声明的函数名,或者是一个函数表达式
DOM格式如上,javascript代码
运行结果:
可想而知,只会弹出一个弹出框,虽然绑定了两次,‘我是click2’
一个click处理器在同一时间只能指向唯一的对象。因此就算对于一个对象绑定了多次,但是仍然只会出现最后的一次绑定
addEventlistener绑定click事件:
同样上面的DOM结构,对应的javascript代码:
运行结果:
两次绑定的事件,都能够成功运行,也就是前后弹出 ‘我是addEvent1’ '我是addEvent2'
由此可知,对于一个可以绑定的事件对象,想多次绑定事件都能运行,选用addEventListener
addEventListener为添加,相对应的为removeListener即注销事件。但是如果像上面的用匿名函数的方式注册的事件,不能使用removeListener注销,因为没用对应事件的引用。
所以注册事件如果需要取消,最好使用一个引用,即:
也正是这种方式,对于一个对象多次绑定同样的eventName,那么不会重复执行,只会执行一次。对于上面的匿名函数,就算内容一样,也会依次执行,因为并不能算是相同事件处理器。
里面的this引用,不是window对象,而是触发事件的元素的引用。event参数就和currentTarget属性值一样
对于IE9之前,相对应的是attachEvent和detachEvent
总结:
1.onclick事件在同一时间只能指向唯一对象
2.addEventListener给一个事件注册多个listener
3.addEventListener对任何DOM都是有效的,而onclick仅限于HTML
4.addEventListener可以控制listener的触发阶段,(捕获/冒泡)。对于多个相同的事件处理器,不会重复触发,不需要手动使用removeEventListener清除
5.IE9使用attachEvent和detachEvent
参考文献:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
结论:
1.onclick事件在同一时间只能指向唯一对象
2.addEventListener给一个事件注册多个listener
3.addEventListener对任何DOM都是有效的,而onclick仅限于HTML
4.addEventListener可以控制listener的触发阶段,(捕获/冒泡)。对于多个相同的事件处理器,不会重复触发,不需要手动使用removeEventListener清除
5.IE9使用attachEvent和detachEvent
探究:
onclick用法:
element.onclick = functionRef
functionRef是一个函数,通常是在别处声明的函数名,或者是一个函数表达式
DOM格式如上,javascript代码
运行结果:
可想而知,只会弹出一个弹出框,虽然绑定了两次,‘我是click2’
一个click处理器在同一时间只能指向唯一的对象。因此就算对于一个对象绑定了多次,但是仍然只会出现最后的一次绑定
addEventlistener绑定click事件:
currentTarget.addEventListener(type, listener, option)
同样上面的DOM结构,对应的javascript代码:
运行结果:
两次绑定的事件,都能够成功运行,也就是前后弹出 ‘我是addEvent1’ '我是addEvent2'
由此可知,对于一个可以绑定的事件对象,想多次绑定事件都能运行,选用addEventListener
addEventListener为添加,相对应的为removeListener即注销事件。但是如果像上面的用匿名函数的方式注册的事件,不能使用removeListener注销,因为没用对应事件的引用。
所以注册事件如果需要取消,最好使用一个引用,即:
var eventName = function () { //something };
也正是这种方式,对于一个对象多次绑定同样的eventName,那么不会重复执行,只会执行一次。对于上面的匿名函数,就算内容一样,也会依次执行,因为并不能算是相同事件处理器。
里面的this引用,不是window对象,而是触发事件的元素的引用。event参数就和currentTarget属性值一样
对于IE9之前,相对应的是attachEvent和detachEvent
总结:
1.onclick事件在同一时间只能指向唯一对象
2.addEventListener给一个事件注册多个listener
3.addEventListener对任何DOM都是有效的,而onclick仅限于HTML
4.addEventListener可以控制listener的触发阶段,(捕获/冒泡)。对于多个相同的事件处理器,不会重复触发,不需要手动使用removeEventListener清除
5.IE9使用attachEvent和detachEvent
参考文献:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
相关文章推荐
- js中的click和onclick事件区别
- 在a标签的href与onclick中使用javascript的区别
- javascript中onMouseDown和onClick的区别
- OnClientClick和OnClick的区别
- asp.net onclick与onclientclick的区别
- onclientclick与onclick区别
- OnClick OnClientClick OnServerCick 的区别与使用
- Html A标签中 href 和 onclick用法、区别、优先级别
- OnTouch(),onTouchEvent(),onClick()的区别
- html,html服务器控件,asp。net服务器控件 区别,以及 onclick ,onserverclick ,onclientclick 事件....
- addEventListener和attachEvent以及element.onclick的区别
- 在a标签的href与onclick中使用javascript的区别
- 使用js动态添加点击事件时,click与onclick的区别
- onclick 事件 和click()的区别
- onclick="f1()"和onclick="return f1()"的区别是什么?
- 原生js:click和onclick本质的区别
- $("").click与onclick的区别示例介绍
- 浅谈onclick与addEventListener两种添加事件方式的区别
- 【html】<a>标签中的href和onclick的区别
- [JS] addEventListener和onclick的区别