如何使用addEventListener添加事件

在之前的一篇经验中介绍了使用attchEvent和detachEvent添加、注销事件；

火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的：

addEventListener和removeEventListener方法

形如：element.addEventListener(type,listener,useCapture)//添加事件

element.removeEventListener(type,listener,useCapture)//注销事件

这里需要和attchEvent相区别，event直接写事件名即可，如click事件->object.addEventListener("click",listener,useCapture)

例：

JS：

window.onload = function(){

var btn1 = document.getElementById("btn1")

btn1.addEventListener("click",test1,false)

var btn2 = document.getElementById("btn2")

btn2.addEventListener("click",function(){

btn1.removeEventListener("click",test1,false)

},false)

}

function test1(){

alert("111")

}

--------------------------------------------

html：

<button id="btn1">测试addEventListener</button>

<button id="btn2">测试removeEventListener</button>

-------------------------------------------------------------------------------

再将上面的例子改一下：

JS：

window.onload = function(){

var btn1 = document.getElementById("btn1")

btn1.addEventListener("click",test1,false)

btn1.addEventListener("click",test2,false)

btn1.addEventListener("click",test3,false)

var btn2 = document.getElementById("btn2")

btn2.addEventListener("click",function(){

btn1.removeEventListener("click",test1,false)

},false)

}

function test1(){

alert("111")

}

function test2(){

alert("222")

}

function test3(){

alert("333")

}

HTML：

<button id="btn1">测试addEventListener</button>

<button id="btn2">测试removeEventListener</button>

现象：页面打开之后，点击【测试addEventListener】，依次d出"111","222","333"

说明，使用addEventListener添加事件后按照绑定顺序执行

再点击【测试removeEventListener】，则会发现不再d“111”，即test1事件被注销

从 官方文档 看，addEventListener 方法使用如下：

主要关注下第三个参数，可以设置为bool类型（useCapture）或者object类型(options)。

removeEventListener的参数与addEventListener类似：

在移除之前添加的监听事件时，很显然需要传入同样的type和listener，那第三个参数options和useCapture呢?

只会检查addEventListener的useCapture或options中的capture值。

例如:

当DOM元素与事件拥有不同的生命周期时，倘若不remove掉eventListener就有可能导致内存泄漏（保留或增加了不必要的内存占用）。比如在单页应用中，切换了页面后，原组件已经卸载，但其注册在document上的事件却保留了下来，白白占用了内存空间。 所以removeEventlister与addEventListener成对儿出现是best practice，可以避免可能出现的内存泄漏问题。

---