addEventListener()与removeEventListener(),追加事件和删除追加事件

Posted 2020-10-14 Sarah119

addEventListener()与removeEventListener()用于追加事件和删除追加。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 
最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认为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);

```

在这个例子中，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()中用来相同的函数。

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序；

亲测： 
方法的内存地址十分的重要，一定要相同才可以删除；试过遇到的坑:

```
var clickFun = null;
aa = function(){
    clickFun = function(){
        alert("1")
    }
    window.removeEventListener("click",clickFun,false)
    window.addEventListener("click",clickFun,false)
}
setInterval(function(){
    aa()
},2000)
```

需求,需要不断地往一个function里面塞数据，里面会有追加，如果不删除了话，会一直追加上去，不环保并且耗内存，必须要删掉追加；然而像上面这样写的话，由于removeEventListener和addEventListener里面的clickFun内存不相等，导致删除不成功；调整如下：

```var clickFun = null;
aa = function(){
    ！clickFun  && （window.removeEventListener("click",clickFun,false)）；
    clickFun = function(){
        alert("1")
    }
    window.addEventListener("click",clickFun,false)
}
setInterval(function(){
    aa()
},2000)

```

确保删除的是同一个内存的方法