addEventListener与removeEventListener

addEventListener，监听事件添加
removeEventListener，监听事件移除

方法虽然看起来简单，但是还是有很多要注意的地方

首先看一下参数，都有3个参数，两个必须，一个可选（默认都为false）
addEventListener(要绑定的事件名，要绑定的方法，冒泡/捕获标识 boolean)
removeEventListener(要移除的事件名，要移除的方法，冒泡/捕获标识 boolean)

来点代码试试

这样我们就给div1绑定了一个点击事件，点击后控制台会输出 "i am div1"
不过仔细看会发现，我们addEventListener里面只传了两个参数啊
没错，因为第三个参数为可选参数，不传的话默认为false
所以上面代码相当于

那第三个参数 冒泡/捕获标识 有什么用呢

就像我给它取得名字一样，控制我们绑定的事件是冒泡阶段触发还是捕获阶段触发，简单来说就是控制事件属性为冒泡事件还是捕获事件
true 为捕获事件，默认/false 为冒泡事件
关于事件冒泡与事件捕获可结合我的另一篇文章 stopPropagation与preventDefault，事件冒泡与事件捕获那点事儿 一起学习

需要注意的几个地方：

同一事件名可以绑定多个方法

可以通过函数名来引用外部函数（但无法传参）

当需要传递参数值时，使用"匿名函数"调用带参数的函数

removeEventListener方法只能移除引用外部函数的绑定事件

只要冒泡/捕获标识不同，则事件不同

根据上一条，可以推出，使用removeEventListener时也要指定冒泡/捕获标识，才能删除对应阶段的事件

事件触发顺序是先捕获，再冒泡

关于兼容性
addEventListener与removeEventListener方法只在IE9+后支持
IE9之前可以使用attachEvent和detachEvent方法