saber 酱的抱枕

Fly me to the moon

05/19
2015
学习

addEventListener()与removeEventListener()

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除,所以如果需要解绑事件的话,在绑定时就要使用不匿名的函数。如下例所添加的事件就可以解绑:

var openImgOnNewTab=function () {
    window.open(this.src); //在新标签页打开图片
}
document.getElementById("id").addEventListener("click", openImgOnNewTab, false);
document.getElementById("id").removeEventListener("click", openImgOnNewTab, false);

如果直接在addEventListener内写一个匿名函数,虽然能绑定这个事件,但是却无法移除了。所以考虑到后期可能面临的一些特殊情况,以及代码的易读,在绑定事件时最好还是使用非匿名函数。
我以前做“点击图片会在新标签页打开图片”这个功能的时候使用的就是匿名的函数,现在我又想让某张图片点击时加载一个视频。但是这两个事件都会发生,所以百度了下移除事件的方法,修改了代码,这才去掉了这张图片在新标签页打开的事件。

addEventListener()与removeEventListener()