js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
2015-04-07 10:35
633 查看
js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
addEventListener()与removeEventListener()用于处理指定事件和删除事件处理程序。所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。这个布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。要在按钮上为click事件添加事件处理程序,可以使用下列代码:
var btn = document.getElementById("myBtn"); btn.addEventListener("click", function () { alert(this.id); }, false);
使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子:
var btn = document.getElementById("myBtn"); btn.addEventListener("click", function () { alert(this.id); }, false);
btn.addEventListener("click", function () {
alert("Hello World");
}, false);
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除,如下面的例子所示:
var btn = document.getElementById("myBtn"); btn.addEventListener("click", function () { alert(this.id); }, false);
btn.removeEventListener("click", function () { //无效!
alert(this.id);
}, false);
在这个例子中,我使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(上面看似使用了相同的参数,但实际上,第二个参数与传入addEventListener()中的与第一个是完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传入addEventListener()中的相同,如下面的例子所示:
var btn = document.getElementById("myBtn"); var handler = function () { alert(this.id); }; btn.addEventListener("click", handler, false); btn.removeEventListener("click", handler, false); //有效!
重写后的这个例子没有问题,是因为在addEventListener()和removeEventListener()中用相同的函数。
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要,我们不建议在事件捕获阶段注册事件处理程序。
相关文章推荐
- js中事件的绑定与解绑:attachEvent/detachEvent、addEventListener/removeEventListener
- JS事件处理(removeEventListener addEventListener)
- JavaScript高级程序设计 阅读笔记(十七) js事件
- removeEventListener 移除已知对象的特定绑定事件的所有function
- JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
- js添加事件和移除事件:addEventListener()与removeEventListener()
- JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
- JavaScript高级程序设计 阅读笔记(十七) js事件
- JS事件---DOM2级事件处理:addEventListener()、removeEventListener()、attachEvent()
- JS添加事件和解绑事件:addEventListener()与removeEventListener()
- 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent
- 监听事件绑定(addEventListener、attachEvent)和移除(removeEventListener、detachEvent)
- js 添加_删除事件 addEventListener/removeEventListener和attachEvent/detachEvent
- JS添加事件和解绑事件:addEventListener()与removeEventListener()
- javascript事件绑定,取消,addEventListener,removeEventListener,attachEvent,detachEvent
- JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
- JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
- JavaScript高级程序设计(第3版)学习笔记11 内建js对象
- JavaScript高级程序设计(第3版)学习笔记10 再访js对象
- JavaScript高级程序设计(第3版)学习笔记12 js正则表达式