javascript为同一事件绑定多个执行函数

于 2018-04-03 19:06:14 发布
阅读量3.7k 收藏 2
点赞数
本文介绍了在网页开发中如何使用兼容的方法实现事件绑定与解绑，包括IE和非IE浏览器的不同处理方式，并通过示例代码展示了具体实现过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

绑定事件目的：为解决页面中同时存在多个window.onload，前一个函数不会其后面的函数覆盖。

兼容性处理：

    IE方式  ：

          IE：attachEvent( '事件名' ,函数)  

          IE： detachEvent( '事件名' ,函数)       

    DOM 方式：

        ！IE：addEventListener( '事件名' , 函数, 布尔值)         布尔值: [  true表示在事件捕获阶段执行  , false表示在事件冒泡阶段执行  ]

        ！IE：removeEventListener( '事件名' , 函数, 布尔值)      

事件绑定：

E g 1:
[html] view plain copy
  1. <span style="font-size:14px;"><!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <script>  
  7.         window.onload = function() {  
  8.             var oBtn = document.getElementById('btn');  
  9.           
  10.             //兼容IE     结果：弹出 b，a  
  11.             oBtn.attachEvent('onclick', function (){  
  12.                 alert('a');  
  13.             });  
  14.             oBtn.attachEvent('onclick', function (){  
  15.                 alert('b');  
  16.             });  
  17.                                                                                   
  18.             // 兼容非IE  addEventListener('事件名', 函数, false)     结果：弹出   a，b  
  19.               
  20.                         oBtn.addEventListener('click', function(){  
  21.                 alert('a');  
  22.             }, false);  
  23.             oBtn.addEventListener('click', function() {  
  24.                 alert('b');  
  25.             }, false);  
  26.                               
  27.             oBtn.onclick=function (){  alert('a');  };                                                    
  28.             oBtn.onclick=function (){  alert('b');  };                                
  29.          };  
  30.           
  31.     </script>  
  32.   
  33.    </head>  
  34.    <body>  
  35.     <input type="button" value="btn" id="btn"  />  
  36.    </body>  
  37. </html></span>  
  38.    

Eg  2:  sb式函数封装

[html] view plain copy
  1. <span style="font-size:14px;">window.onload = function() {  
  2.     var oBtn = document.getElementById('btn');  
  3.   
  4.     if(oBtn.attachEvent) {  
  5.         oBtn.attachEvent('onclick', function() {  
  6.             alert('a');  
  7.         });  
  8.         oBtn.attachEvent('onclick', function() {  
  9.             alert('b');  
  10.         });  
  11.     } else {  
  12.         oBtn.addEventListener('click', function() {  
  13.             alert('a');  
  14.         }, false);  
  15.         oBtn.addEventListener('click', function() {  
  16.             alert('b');  
  17.         }, false);  
  18.     }  
  19.   
  20. };</span>  

Eg  3:  函数封装


[html] view plain copy
  1. <span style="font-size:14px;"><script>            
  2.     /*  
  3.      * obj     对象  
  4.      * ev      '事件'(用单引号)  
  5.      * fn      函数  
  6.      */  
  7.     function manyEvent(obj,ev,fn){  
  8.                   
  9.         //若为IE浏览器则在事件前加上on  
  10.         if(obj.attachEvent){  
  11.             obj.attachEvent('on'+ev,fn);  
  12.         }else{  
  13.             obj.addEventListener(ev,fn,false);  
  14.         }  
  15.     }  
  16.                       
  17.     window.onload = function() {  
  18.         var oBtn = document.getElementById('btn');  
  19.           
  20.         manyEvent(oBtn,'click',function(){  
  21.             alert('a');  
  22.         });  
  23.                   
  24.         manyEvent(oBtn,'click',function(){  
  25.             alert('b');  
  26.         });  
  27.                       
  28.     };  
  29. </script>  
  30. </span>  


事件解绑

Eg  1:

[html] view plain copy
  1. <span style="font-size:14px;"><script>  
  2.   document.addEventListener("mousedown", mouse, false);     //点击鼠标时触发事件  
  3.   document.addEventListener("keydown", key, false);      //按下键盘按键时触发事件  
  4.      
  5.   function mouse(){  alert('已绑定');  }  
  6.       
  7.   function key(){  
  8.     document.removeEventListener("mousedown", mouse, false);  
  9.     alert('已解绑');  
  10.   }    
  11. </script></span>  


评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值