监听事件的绑定与移除主要是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：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="test1" id="btn1"> 9 <input type="button" value="test2" id="btn2"> 10 <script> 11 var btn1=document.getElementById("btn1");/*实名函数*/ 12 var count=0; 13 var handle1=function() { 14 alert(count++); 15 if (count == 3) { 16 alert("事件结束") 17 btn1.removeEventListener("click",handle1,false); 18 } 19 } 20 btn1.addEventListener('click',handle1,false); 21 22 23 var btn2=document.getElementById("btn2");/*匿名函数*/ 24 btn2.addEventListener("click",function(){ 25 alert(123); 26 removeEventListener("click",function(){ 27 alert(123) 28 },false) 29 },false) 30 </script> 31 </body> 32 </html>
通过匿名函数是无法消除监听事件，只有通过实名函数才能。
例2：利用库来处理事件的绑定和移除会更加方便
（1）js事件的绑定与移除库
1 /** 2 * Created by asus on 2016/11/1. 3 */ 4 var EventUtil={ 5 /*检测绑定事件*/ 6 addHandler:function(element,type,handler){ 7 if(element.addEventListener){ 8 element.addEventListener(type,handler,false); 9 } 10 else if(element.attachEvent){ 11 element.attachEvent('on'+type,handler); 12 } 13 else{ 14 element["on"+type]=handler /*直接赋给事件*/ 15 } 16 17 }, 18 /*通过removeHandler*/ 19 removeHandler:function(element,type,handler) { /*Chrome*/ 20 if (element.removeEventListener) 21 element.removeEventListener(type, handler, false); 22 else if (element.deattachEvent) { /*IE*/ 23 element.deattachEvent('on' + type, handler); 24 } 25 else { 26 element["on" + type] = null; 27 /*直接赋给事件*/ 28 } 29 } 30 31 };
（2）HTML
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="封装监听事件.js"></script> 7 </head> 8 <body> 9 <input type="button" value="bangding" id="btn"> 10 <input type="button" value="yichu" id="btn1"> 11 <script type="text/javascript"> 12 var btn=document.getElementById("btn"); 13 var bangding=function(){ 14 alert("你好！") 15 } 16 EventUtil.addHandler(btn,"click",bangding); 17 18 var btn1=document.getElementById("btn1"); 19 var yichu=function(){ 20 alert("你好已被移除！"); 21 EventUtil.removeHandler(btn,"click",bangding) 22 } 23 EventUtil.addHandler(btn1,"click",yichu) 24 </script> 25 </body> 26 </html>
这就是简单的监听事件的绑定与移除。