javascript binding multiple execution functions for the same event

Binding event purpose: to solve the problem that multiple windows.onload exist in the page at the same time, the previous function will not be overwritten by the later function.

Compatibility handling:

IE mode:

IE: attachEvent('event name ', function)

IE: detachEvent('event name ', function)

DOM mode:

        ! IE: addEventListener('event name ', function, Boolean value) Boolean value: [true indicates execution in event capture phase, false indicates execution in event bubble phase]

        ! IE: removeEventListener('event name ', function, Boolean)

Event binding:

Eg 1:
  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.             //Compatible with IE results: pop up b, a
  11.             oBtn.attachEvent('onclick', function (){  
  12.                 alert('a');  
  13.             });  
  14.             oBtn.attachEvent('onclick', function (){  
  15.                 alert('b');  
  16.             });  
  17.                                                                                   
  18.             //Compatible with non IE addEventListener('event name ', function, false) result: pop up 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 function encapsulation

  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: function encapsulation


  1. <span style="font-size:14px;"><script>            
  2.     /*  
  3.      * obj     Object
  4.      * ev      'Event '(in single quotes)
  5.      * fn      Function
  6.      */  
  7.     function manyEvent(obj,ev,fn){  
  8.                   
  9.         //In case of IE browser, add on before the event
  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>  


Event unbundling

Eg  1:

  1. <span style="font-size:14px;"><script>  
  2.   document.addEventListener("mousedown", mouse, false);     //Event triggered when clicking the mouse
  3.   document.addEventListener("keydown", key, false);      //Event triggered when a keyboard key is pressed
  4.      
  5.   function mouse(){  alert('Bound');  }  
  6.       
  7.   function key(){  
  8.     document.removeEventListener("mousedown", mouse, false);  
  9.     alert('Unbind');  
  10.   }    
  11. </script></span>  


Tags: IE Windows

Posted on Tue, 31 Mar 2020 17:23:08 -0700 by amylisa