js事件的監聽器的使用

原創 Xiao_Peter 2018-08-22 09:16

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

[javascript] view plaincopy
  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 plaincopy
  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 plaincopy
  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 plaincopy
  1. btn.addEventListener("click",function(){  
  2.     alert(11);  
  3. });  
  4. btn.removeEventListener("click",function(){  
  5.     alert(11);  
  6. });  
正確寫法：
[javascript] view plaincopy
  1. btn.addEventListener("click",eventTwo);  
  2. btn.removeEventListener("click",eventOne);  


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

[javascript] view plaincopy
  1. /* 
  2.  * addEventListener:監聽Dom元素的事件 
  3.  *   
  4.  *  target：監聽對象 
  5.  *  type：監聽函數類型，如click,mouseover 
  6.  *  func：監聽函數 
  7.  */  
  8. function addEventHandler(target,type,func){  
  9.     if(target.addEventListener){  
  10.         //監聽IE9，谷歌和火狐  
  11.         target.addEventListener(type, func, false);  
  12.     }else if(target.attachEvent){  
  13.         target.attachEvent("on" + type, func);  
  14.     }else{  
  15.         target["on" + type] = func;  
  16.     }   
  17. }  
  18. /* 
  19.  * removeEventHandler:移除Dom元素的事件 
  20.  *   
  21.  *  target：監聽對象 
  22.  *  type：監聽函數類型，如click,mouseover 
  23.  *  func：監聽函數 
  24.  */  
  25. function removeEventHandler(target, type, func) {  
  26.     if (target.removeEventListener){  
  27.         //監聽IE9，谷歌和火狐  
  28.         target.removeEventListener(type, func, false);  
  29.     } else if (target.detachEvent){  
  30.         target.detachEvent("on" + type, func);  
  31.     }else {  
  32.         delete target["on" + type];  
  33.     }  
  34. }  
  35. var eventOne = function(){  
  36.     alert("第一個監聽事件");  
  37. }  
  38. function eventTwo(){  
  39.     alert("第二個監聽事件");  
  40. }  
  41. window.onload = function(){  
  42.     var bindEventBtn = document.getElementById("bindEvent");  
  43.     //監聽eventOne事件  
  44.     addEventHandler(bindEventBtn,"click",eventOne);  
  45.     //監聽eventTwo事件  
  46.     addEventHandler(bindEventBtn,"click",eventTwo );  
  47.     //監聽本身的事件  
  48.     addEventHandler(bindEventBtn,"click",function(){  
  49.         alert("第三個監聽事件");  
  50.     });  
  51.     //取消第一個監聽事件  
  52.     removeEventHandler(bindEventBtn,"click",eventOne);  
  53.     //取消第二個監聽事件  
  54.     removeEventHandler(bindEventBtn,"click",eventTwo);  
  55. }  
[javascript] view plaincopy
  1.   
實例：
[html] view plaincopy
  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.   
  50.   
  51.     </head>  
  52.     <body>  
  53.         <input type="button" value="測試" id="bindEvent">  
  54.         <input type="button" value="測試2" id="yuanEvent">  
  55.     </body>  
  56. </html>  
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

怎樣讓div中的字上下左右居中

<div style="height: 30px;line-height: 30px;text-align: center;"> 讓我居中 </div>使line-height和height一樣就能讓字上下居中

shaochengand 2020-07-08 11:56:57

TOMCAT下配置項目路徑

對工程的部署一般是將工程的壓縮文件放在tomcat安裝目錄的webapps下，訪問時通過鍵入：http://localhost:8080/xx(假定爲本機訪問，xx是部署時的應用工程的訪問名字）。 而如果直接鍵入：http://loca

shaochengand 2020-07-08 11:56:57

HTML+CSS+JS實現小學四則運算自動出題程序

HTML+CSS+JS實現小學四則運算自動出題程序 要求 編寫一個小學四則運算自動出題程序 要求： 1、100以內四則運算，題目自動生成； 2、頁面需要有計算結果輸入框，提交按鈕； 3、用戶提交結果之後系統能自動計算成績； 4、系

马踏飞燕&lin_li 2020-07-08 11:54:31

JS 實現拖拽效果

JS 實現拖拽效果 拖拽原理 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/

马踏飞燕&lin_li 2020-07-08 11:54:29

詳解Flex佈局

Flex佈局 flex 佈局是繼 標準流佈局 、 浮動佈局 、 定位佈局 後的第四種佈局方式。這種方式可以非常優雅的實現子元素居中或 均勻分佈，甚至可以隨着窗口縮放自動適應。 flex 佈局在瀏覽器中存在一定的兼容性。但是在小程序

马踏飞燕&lin_li 2020-07-08 11:54:29

HTML + CSS + JS 實現隨機抽獎

HTML + CSS + JS 實現隨機抽獎 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view

马踏飞燕&lin_li 2020-07-08 11:54:28

Flex佈局實戰：支付寶首頁

Flex佈局實戰：支付寶首頁 index.wxml <view class="container"> <!-- 藍色部分 --> <view class="blue-group"> <!-- 頂部部分 --> <vie

马踏飞燕&lin_li 2020-07-08 11:54:28

Axios--基礎知識

下載使用方式： npm: $ npm install axios cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 案例（GET以及POST請求

GQ_cyan 2020-07-08 11:50:38

HTML5入門之常用標籤

html5標準網頁聲明 <!DOCTYPE html> 必要結構 <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

blackcatkiller 2020-07-08 10:51:12

uniapp的相關介紹

1.pages.json   官網地址：https://uniapp.dcloud.io/collocation/pages?id=%e9%85%8d%e7%bd%ae%e9%a1%b9%e5%88%97%e8%a1%a8     pag

大佬养成记 2020-07-08 07:55:30

uniapp的那些坑

1.selectedColor不起作用      1.查看位置是否寫對，與lis同級                    2.是否爲16進制，selectedColor寫的rgb不支持  3.是否被其他樣式覆蓋，其他地方也設置過sele

大佬养成记 2020-07-08 07:55:14

javascript之基於tensorflow的posenet項目

1）源代碼如下： git clone https://github.com/tensorflow/tfjs-models 2）編譯： tfjs-models>yarn tfjs-models>cd posenet tfjs-models\

嵇康 2020-07-08 04:18:10

JavaScript 技術篇 - js通過xpath路徑定位元素方法

我先寫好一段 xpath 路徑，然後通過該路徑可以查到對應的元素節點。 通過 document.evaluate('...', document).iterateNext() 方法可以用 xpath 路徑定位到元素節點。 >

挣扎的蓝藻 2020-07-08 02:57:51

Web前端-Vue--vue-cli腳手架

Vue-cli腳手架搭建: 拿到新電腦第一次配置環境要做的步驟(以前沒有配置過環境): 安裝npm命令:      1.去nodejs官網下載node.exe  官網地址:https://nodejs.org/zh-cn/ 2. node

yanghainan0318 2020-07-08 01:18:38

Web前端-Vue--路由，本地mock數據搭建，keep-alive，active-class，重定向redirect

路由    路由的最基本配置:     1.下載vue-router模塊(我們搭建vue項目時 已經勾選下載 所以在這不需要重複下載)     2.在main.js 使用import語句 引入vue-router模塊     3.讓vue

yanghainan0318 2020-07-08 01:18:38