天天看點
傳回

JS事件的監聽器的使用

1、當同一個對象使用.onclick的寫法觸發多個方法的時候，後一個方法會把前一個方法覆寫掉，也就是說，在對象的onclick事件發生時，隻會執行最後綁定的方法。而用事件監聽則不會有覆寫的現象，每個綁定的事件都會被執行。如下：

[javascript]  view plain copy

  1. <span style="font-size:18px;">window.onload = function(){  
  2.     var btn = document.getElementById("yuanEvent");  
  3.     btn.onclick = function(){  
  4.         alert("第一個事件");  
  5.     }  
  6.     btn.onclick = function(){  
  7.         alert("第二個事件");  
  8.     }  
  9.     btn.onclick = function(){  
  10.         alert("第三個事件");  
  11.     }  
  12. }</span>  

最後隻輸出：第三個事件，因為後一個方法都把前一個方法覆寫掉了。

原生态的事件綁定函數addEventListener：

[javascript]  view plain copy

  1. var eventOne = function(){  
  2.     alert("第一個監聽事件");  
  3. }  
  4. function eventTwo(){  
  5.     alert("第二個監聽事件");  
  6. }  
  7. window.onload = function(){  
  8.     var btn = document.getElementById("yuanEvent");  
  9.     //addEventListener：綁定函數  
  10.     btn.addEventListener("click",eventOne);  
  11.     btn.addEventListener("click",eventTwo);  
  12. }  

輸出：第一個監聽事件 和 第二個監聽事件

2、采用事件監聽給對象綁定方法後，可以解除相應的綁定，寫法如下：

[javascript]  view plain copy

  1. var eventOne = function(){  
  2.     alert("第一個監聽事件");  
  3. }  
  4. function eventTwo(){  
  5.     alert("第二個監聽事件");  
  6. }  
  7. window.onload = function(){  
  8.     var btn = document.getElementById("yuanEvent");  
  9.     btn.addEventListener("click",eventOne);  
  10.     btn.addEventListener("click",eventTwo);  
  11.     btn.removeEventListener("click",eventOne);  
  12. }  

輸出：第二個監聽事件

3、解除綁定事件的時候一定要用函數的句柄，把整個函數寫上是無法解除綁定的。

錯誤寫法：

[javascript]  view plain copy

  1. btn.addEventListener("click",function(){  
  2.     alert(11);  
  3. });  
  4. btn.removeEventListener("click",function(){  
  5.     alert(11);  
  6. });  

正确寫法：

[javascript]  view plain copy

  1. btn.addEventListener("click",eventTwo);  
  2. btn.removeEventListener("click",eventOne);  

總結：對函數進行封裝後的監聽事件如下，相容各大主流浏覽器。

[javascript]  view plain copy

  1. function addEventHandler(target,type,func){  
  2.     if(target.addEventListener){  
  3.         //監聽IE9，谷歌和火狐  
  4.         target.addEventListener(type, func, false);  
  5.     }else if(target.attachEvent){  
  6.         target.attachEvent("on" + type, func);  
  7.     }else{  
  8.         target["on" + type] = func;  
  9.     }   
  10. }  
  11. function removeEventHandler(target, type, func) {  
  12.     if (target.removeEventListener){  
  13.         //監聽IE9，谷歌和火狐  
  14.         target.removeEventListener(type, func, false);  
  15.     } else if (target.detachEvent){  
  16.         target.detachEvent("on" + type, func);  
  17.     }else {  
  18.         delete target["on" + type];  
  19.     }  
  20. }  
  21. var eventOne = function(){  
  22.     alert("第一個監聽事件");  
  23. }  
  24. function eventTwo(){  
  25.     alert("第二個監聽事件");  
  26. }  
  27. window.onload = function(){  
  28.     var bindEventBtn = document.getElementById("bindEvent");  
  29.     //監聽eventOne事件  
  30.     addEventHandler(bindEventBtn,"click",eventOne);  
  31.     //監聽eventTwo事件  
  32.     addEventHandler(bindEventBtn,"click",eventTwo );  
  33.     //監聽本身的事件  
  34.     addEventHandler(bindEventBtn,"click",function(){  
  35.         alert("第三個監聽事件");  
  36.     });  
  37.     //取消第一個監聽事件  
  38.     removeEventHandler(bindEventBtn,"click",eventOne);  
  39.     //取消第二個監聽事件  
  40.     removeEventHandler(bindEventBtn,"click",eventTwo);  
  41. }  

[javascript]  view plain copy

執行個體： [html]  view plain copy

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.         <title>Event</title>  
  6.         <script type="text/javascript">  
  7.             function addEventHandler(target,type,func){  
  8.                 if(target.addEventListener){  
  9.                     //監聽IE9，谷歌和火狐  
  10.                     target.addEventListener(type, func, false);  
  11.                 }else if(target.attachEvent){  
  12.                     target.attachEvent("on" + type, func);  
  13.                 }else{  
  14.                     target["on" + type] = func;  
  15.                 }   
  16.             }  
  17.             function removeEventHandler(target, type, func) {  
  18.                 if (target.removeEventListener){  
  19.                     //監聽IE9，谷歌和火狐  
  20.                     target.removeEventListener(type, func, false);  
  21.                 } else if (target.detachEvent){  
  22.                     target.detachEvent("on" + type, func);  
  23.                 }else {  
  24.                     delete target["on" + type];  
  25.                 }  
  26.             }  
  27.             var eventOne = function(){  
  28.                 alert("第一個監聽事件");  
  29.             }  
  30.             function eventTwo(){  
  31.                 alert("第二個監聽事件");  
  32.             }  
  33.             window.onload = function(){  
  34.                 var bindEventBtn = document.getElementById("bindEvent");  
  35.                 //監聽eventOne事件  
  36.                 addEventHandler(bindEventBtn,"click",eventOne);  
  37.                 //監聽eventTwo事件  
  38.                 addEventHandler(bindEventBtn,"click",eventTwo );  
  39.                 //監聽本身的事件  
  40.                 addEventHandler(bindEventBtn,"click",function(){  
  41.                     alert("第三個監聽事件");  
  42.                 });  
  43.                 //取消第一個監聽事件  
  44.                 removeEventHandler(bindEventBtn,"click",eventOne);  
  45.                 //取消第二個監聽事件  
  46.                 removeEventHandler(bindEventBtn,"click",eventTwo);  
  47.             }  
  48.         </script>  
  49.     </head>  
  50.     <body>  
  51.         <input type="button" value="測試" id="bindEvent">  
  52.         <input type="button" value="測試2" id="yuanEvent">  
  53.     </body>  
  54. </html>  
js小結 事件監聽器
上一篇: 【JS】iframe下監聽postMessage并列印接收的消息
下一篇: android 監聽事件的處理

繼續閱讀