事件处理程序 addEventListener() 与removeEventListener()

DOM2 Events 为事件处理程序的赋值和移除定义了两个方法：addEventListener() 和 removeEventListener()。这两个方法暴露在所有的DOM节点上。它们接收3个参数：事件名、事件处理函数和一个布尔值，true表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事件处理程序。 以按钮添加click事件处理程序为例,可以这样写：

let btn = document.getElementById("myBtn");
btn.addEventListener("click",()=>{
	console.log(this.id);
},false);

以上代码为按钮添加了会在事件冒泡阶段触发的onclick事件处理程序（因为最后一个参数值为false）。与DOM0方式（btn.onclick=function(){console.log("Clicked")}）类似，这个时间处理程序同样在被附加到的元素作用域中运行。使用DOM2方式的主要优势是可以为同一个事件添加多个时间处理程序。来看下面的例子：

let btn = document.getElementById("myBtn");
btn.addEventListener("click",()=>{
	console.log(this.id);
},false);
btn.addEventListener("click",()=>{
	console.log("Hello world!");
},false);

这里给按钮添加了两个事件处理程序。多个事件处理程序以添加顺序来触发，因此前面的代码会先打印元素ID，然后显示消息“Hello world!”。

通过addEventListener()添加的事件处理程序只能使用removeEventListener()并传入与添加时同样的参数来移除。这意味着使用addEventListener()添加的匿名函数无法移除，如下面的例子所示：

let btn = document.getElementById("myBtn");
btn.addEventListener("click",()=>{
	console.log(this.id);
},false);

// 其他代码

btn.removeEventListener("click",()=>{    // 没有效果
	console.log(this.id);
},false);

这个例子通过addEventListenter()添加了一个匿名函数作为事件处理程序。然后，又以看起来相同的参数调用了removeEventListener()。但时间上，第二个参数与传给addEventListener()的完全不是一回事。传给removeEventListener()的事件处理函数必须与传个addEventListener()的是同一个，如下面的例子所示：

let btn = document.getElementById("myBtn");
let handler = function(){
	console.log(this.id);
};

btn.addEventListener("click",handler,false);

// 其他代码

btn.removeEventListener("click",handler,false); // 有效果