saber 酱的抱枕

Fly me to the moon

06/8
2016
学习

JavaScript中注册和移除事件

saber 撰写 无回复 1,826次查看

以click事件为例，我们常用onclick和addEventListener来添加它。但是有添加就要有解除，下面先以绑定一个非匿名函数为例：

function test () {
	console.log("yyy");
}
a.onclick=test;
a.addEventListener("click", test, false);

事件函数test是有名字的。如果是无名字的函数，如下：

a.onclick=function(){
	console.log("yyy");
}
a.addEventListener("click", function(){
	console.log("yyy");
}, false);

添加的时候，不管事件函数有没有名字，在效果上是一样的。
添加的时候要注意：
1.onclick和addEventListener添加同一类型的事件是不会互相覆盖的。所以在上面任意一个例子中，都会输出两次"yyy"。
2.如果同一元素存在多个onclick，或同一元素用多个addEventListener添加了同一事件，都是后面添加的事件覆盖前面添加的事件。当然，onclick和addEventListener还是不会互相覆盖的。

但说到移除事件，则有点坑。

1.对于onclick添加的事件，不管它的事件函数时有名字的还是无名字的，都可以将onclick事件设置为空来移除。如：

a.onclick=null;

2.对于addEventListener添加的事件，则比较坑。如果事件函数是有名字的，我们可以用removeEventListener来移除，如：

a.removeEventListener("click", test , false);

但如果事件函数是没有名字的，则无法移除。

虽然可能有一些变通的方法——如在函数外设立一个状态指示器，在每次执行函数时都进行判断，如果状态变成某个值，则不执行函数，就达到了不让函数生效的目的。但是在根源上，这个事件还是没有移除。

综上，当我们需要使用removeEventListener来移除事件的话，方法只能是给函数起个名字了。

JavaScript中注册和移除事件

05/19
2015
学习

addEventListener()与removeEventListener()

saber 撰写 无回复 1,205次查看

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()