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

绑定事件目的：为解决页面中同时存在多个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>

热门工具换一换