監聽事件的綁定與移除主要是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>
這就是簡單的監聽事件的綁定與移除。