addEventListener与removeEventList

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

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

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

来点代码试试

<div id="div1"></div>
<script>
document.getElementById('div1').addEventListener('click',function(event) {
  console.log("i am div1");
})
</script>

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

<div id="div1"></div>
<script>
document.getElementById('div1').addEventListener('click',function(event) {
  console.log("i am div1");
},false)
</script>

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

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

需要注意的几个地方：

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

<div id="div1"></div>
<script>
document.getElementById('div1').addEventListener('click',function(event) {
  console.log("i am div1");
})
document.getElementById('div1').addEventListener('click',function(event) {
  console.log("let me say it again,i am div1");
})
//click事件上绑定了两个方法
</script>

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

<div id="div1"></div>
<script>
document.getElementById('div1').addEventListener('click',myTest)
function myTest(){
 console.log("i am div1");
}
//通过函数名来引用外部函数，但无法传参
</script>

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

<div id="div1"></div>
<script>
var a = 1;
var b = 2;
document.getElementById('div1').addEventListener('click',function(event) {
  myTest(a,b)
})
function myTest(value1,value2){
 console.log("i am div1",value1+ value2);
}
</script>

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

<div id="div1"></div>
<script>
//这里绑定的是匿名函数function，所以无法移除
document.getElementById('div1').addEventListener('click',function(event) {
  console.log("i am div1");
})

//这里绑定的是外部函数myTest，所以可以使用removeEventListener方法移除
document.getElementById('div1').addEventListener('click',myTest)
document.getElementById('div1').removeEventListener('click',myTest)
function myTest(){
 console.log("i am div1");
}
</script>

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

<div id="div1"></div>
<script>
//这里可以理解为有两个事件，一个是冒泡阶段的click事件，一个是捕获阶段的click事件
document.getElementById('div1').addEventListener('click',myTest)
document.getElementById('div1').addEventListener('click',myTest,true)
function myTest(){
 console.log("i am div1");
}
//所以点击div1，会触发两次myTest，控制台会输出两次 "i am div1"
</script>

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

<div id="div1"></div>
<script>
//这里有两个事件，一个是冒泡阶段的click事件，一个是捕获阶段的click事件
document.getElementById('div1').addEventListener('click',myTest)
document.getElementById('div1').addEventListener('click',myTest,true)
//所以删除事件时也要指定冒泡/捕获标识，单独删两次
document.getElementById('div1').removeEventListener('click',myTest)
document.getElementById('div1').removeEventListener('click',myTest,true)
function myTest(){
 console.log("i am div1");
}
</script>

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

<div id="div1"></div>
<script>
document.getElementById('div1').addEventListener('click',myTest1)
document.getElementById('div1').addEventListener('click',myTest,true)
function myTest(){
 console.log("i am div1");
}
function myTest1(){
 console.log("i am div1,too");
}
//点击div1，按照先捕获，再冒泡的顺序，控制台会输出
//"i am div1"
//"i am div1,too"
</script>

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