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

兼容性处理:

    IE方式  :


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


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

    DOM 方式:

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


        !IE:removeEventListener( '事件名' , 函数, 布尔值)      




事件绑定:

Eg 1:[html] view plain
<https://blog.csdn.net/lu_0216/article/details/52799910#> copy
<https://blog.csdn.net/lu_0216/article/details/52799910#>
* <span style="font-size:14px;"><!DOCTYPE html>  
* <html>  
*    <head>  
*     <meta charset="UTF-8">  
*     <title></title>  
*     <script>  
*         window.onload = function() {  
*             var oBtn = document.getElementById('btn');  
*           
*             //兼容IE     结果:弹出 b,a  
*             oBtn.attachEvent('onclick', function (){  
*                 alert('a');  
*             });  
*             oBtn.attachEvent('onclick', function (){  
*                 alert('b');  
*             });  
*
                                                                                  
*             // 兼容非IE  addEventListener('事件名', 函数, false)     结果:弹出   a,b  
*               
*                         oBtn.addEventListener('click', function(){  
*                 alert('a');  
*             }, false);  
*             oBtn.addEventListener('click', function() {  
*                 alert('b');  
*             }, false);  
*                               
*             oBtn.onclick=function
 (){  alert('a');  };                                                    
*             oBtn.onclick=function
 (){  alert('b');  };                                
*          };  
*           
*     </script>  
*   
*    </head>  
*    <body>  
*     <input type="button" value="btn" id="btn"  />  
*    </body>  
* </html></span>  
*    
Eg  2:  sb式函数封装


[html] view plain <https://blog.csdn.net/lu_0216/article/details/52799910#>
copy <https://blog.csdn.net/lu_0216/article/details/52799910#>
* <span style="font-size:14px;">window.onload = function() {  
*     var oBtn = document.getElementById('btn');  
*   
*     if(oBtn.attachEvent) {  
*         oBtn.attachEvent('onclick', function() {  
*             alert('a');  
*         });  
*         oBtn.attachEvent('onclick', function() {  
*             alert('b');  
*         });  
*     } else {  
*         oBtn.addEventListener('click', function() {  
*             alert('a');  
*         }, false);  
*         oBtn.addEventListener('click', function() {  
*             alert('b');  
*         }, false);  
*     }  
*   
* };</span>  
Eg  3:  函数封装



[html] view plain <https://blog.csdn.net/lu_0216/article/details/52799910#>
copy <https://blog.csdn.net/lu_0216/article/details/52799910#>
* <span style="font-size:14px;"><script>            
*     /*  
*      * obj     对象  
*      * ev      '事件'(用单引号)  
*      * fn      函数  
*      */  
*     function manyEvent(obj,ev,fn){  
*                   
*         //若为IE浏览器则在事件前加上on  
*         if(obj.attachEvent){  
*             obj.attachEvent('on'+ev,fn);  
*         }else{  
*             obj.addEventListener(ev,fn,false);  
*         }  
*     }  
*                       
*     window.onload = function() {  
*         var oBtn = document.getElementById('btn');  
*           
*         manyEvent(oBtn,'click',function(){  
*             alert('a');  
*         });  
*                   
*         manyEvent(oBtn,'click',function(){  
*             alert('b');  
*         });  
*                       
*     };  
* </script>  
* </span>  



事件解绑

Eg  1:


[html] view plain <https://blog.csdn.net/lu_0216/article/details/52799910#>
copy <https://blog.csdn.net/lu_0216/article/details/52799910#>
* <span style="font-size:14px;"><script>  
*   document.addEventListener("mousedown", mouse, false);     //点击鼠标时触发事件  
*   document.addEventListener("keydown", key, false);      //按下键盘按键时触发事件  
*      
*   function mouse(){  alert('已绑定');  }  
*       
*   function key(){  
*     document.removeEventListener("mousedown", mouse, false);  
*     alert('已解绑');  
*   }    
* </script></span>