面试笔记(六)---Js实现eventHandler

 

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. /* 
  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 plain copy

  1.   

实例:

[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.   
  50.   
  51.     </head>  
  52.     <body>  
  53.         <input type="button" value="测试" id="bindEvent">  
  54.         <input type="button" value="测试2" id="yuanEvent">  
  55.     </body>  
  56. </html>  
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

终身学习者-刘

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值