监听事件的绑定与移除主要是addEventListener和removeEventListener的运用。
addEventListener语法
element.addEventListener(type，handler，false/true)
type:事件类型
handler:事件执行触发的函数
false/true:false为冒泡/ture为捕获，参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
事件捕获：父级元素先触发，子集元素后触发；
事件冒泡：子集元素先触发，父级元素后触发；
一般的绑定事件，都是采用冒泡方式，也就是使用false
removeEventListener语法
element.removeEventListener(type，handler，false/true)
参数值含义和上述一样。
接下来用例子进一步理解监听事件的绑定与移除
例1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="test1" id="btn1">
<input type="button" value="test2" id="btn2">
<script>
var btn1=document.getElementById("btn1");/*实名函数*/
var count=0;
var handle1=function() {
alert(count++);
if (count == 3) {
alert("事件结束")
btn1.removeEventListener("click",handle1,false);
}
}
btn1.addEventListener('click',handle1,false); var btn2=document.getElementById("btn2");/*匿名函数*/
btn2.addEventListener("click",function(){
alert(123);
removeEventListener("click",function(){
alert(123)
},false)
},false)
</script>
</body>
</html>
通过匿名函数是无法消除监听事件，只有通过实名函数才能。
例2：利用库来处理事件的绑定和移除会更加方便
（1）js事件的绑定与移除库
/**
* Created by asus on 2016/11/1.
*/
var EventUtil={
/*检测绑定事件*/
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}
else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}
else{
element["on"+type]=handler /*直接赋给事件*/
} },
/*通过removeHandler*/
removeHandler:function(element,type,handler) { /*Chrome*/
if (element.removeEventListener)
element.removeEventListener(type, handler, false);
else if (element.deattachEvent) { /*IE*/
element.deattachEvent('on' + type, handler);
}
else {
element["on" + type] = null;
/*直接赋给事件*/
}
} };
（2）HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="封装监听事件.js"></script>
</head>
<body>
<input type="button" value="bangding" id="btn">
<input type="button" value="yichu" id="btn1">
<script type="text/javascript">
var btn=document.getElementById("btn");
var bangding=function(){
alert("你好！")
}
EventUtil.addHandler(btn,"click",bangding); var btn1=document.getElementById("btn1");
var yichu=function(){
alert("你好已被移除！");
EventUtil.removeHandler(btn,"click",bangding)
}
EventUtil.addHandler(btn1,"click",yichu)
</script>
</body>
</html>
这就是简单的监听事件的绑定与移除。
