Of Stack

Explain the basic example of javascript event propagation of 35

  • 2021-07-21 06:45:31
  • OfStack

In this article, we share the spread of js events for your reference. The specific contents are as follows 


<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <style type="text/css"> 
   #box1{ 
    width: 300px; 
    height: 300px; 
    background-color: deepskyblue; 
   } 
    
   #box2{ 
    width: 200px; 
    height: 200px; 
    background-color: cadetblue; 
   } 
    
   #box3{ 
    width: 100px; 
    height: 100px; 
    background-color: chocolate; 
   } 
    
  </style> 
   
  <script type="text/javascript"> 
   
   function bind(obj , eventStr , callback){ 
     
    if(obj.addEventListener){ 
     // If it is a normal browser  
     obj.addEventListener(eventStr , callback , false); 
    }else{ 
     //IE8 
     obj.attachEvent("on"+eventStr , function(){ 
      callback.call(obj); 
     }); 
    } 
   } 
    
   window.onload = function(){ 
     
    /* 
     *  Propagation of events  
     * -  Microsoft and Netscape have different understandings about the spread of events  
     * -  Microsoft said that events should be spread from descendant elements to ancestral elements, that is, spread from inside to outside, which is what we call the bubbling of events  
     * -  Netscape believes that events should spread from ancestral elements to descendant elements, that is, from outside to inside, which 1 Stage we call event capture  
     * - W3C Combine the schemes of the two companies , Divide the propagation of events into 3 Stages  
     *  1. Capture phase  
     *   -  Event from the outermost element ( document ), capturing events to the target element  
     *   -  This phase does not trigger events by default  
     *  2. Target phase  
     *   -  Target refers to the element that triggered the event, and the capture phase stops when the target element is captured  
     *  3. Bubbling stage  
     *   -  Event bubbles from the target element to the ancestor element, at which time the event starts to be triggered  
     *   -  The default events are executed during the bubble phase  
     * 
     * -  Events are executed by default in the bubble phase, 1 There is generally no need to trigger events during the capture phase,  
     *   If you want to execute events during the capture phase, you need to set the addEventListener() The first part of 3 Parameters are modified to true 
     * 
     * - IE8 Browsers below do not have a capture phase and cannot be set to trigger events during the capture phase  
     */ 
     
    // They are 3 A div Binding single-click response function  
    var box1 = document.getElementById("box1"); 
    var box2 = document.getElementById("box2"); 
    var box3 = document.getElementById("box3"); 
     
    bind(box1,"click",function(){ 
     alert(1); 
    }) 
     
    bind(box2,"click",function(){ 
     alert(2); 
    }) 
     
    bind(box3,"click",function(){ 
     alert(3); 
    }) 
     
   }; 
    
    
  </script> 
 </head> 
 <body> 
   
  <div id="box1"> 
   <div id="box2"> 
    <div id="box3"></div> 
   </div> 
  </div> 
   
 </body> 
</html>
Related articles: