Two kinds of event streams in JavaScript

two kinds of event streams in JavaScript

The event flow describes the order in which events are received from the page. It is IE and Netscape that propose the concept of event flow, but the former presents the event bubbling stream which is commonly used by us, and the latter proposes the event capture stream.

The first part: event bubbling

That is, events begin to be received by the most specific elements, and then propagate up to less specific nodes (documents).

Here's a simple example:

<! DOCTYPE html>"en">"UTF-8"> <title>bubble</title> <style>button{background:red;        Color:white;            } #third {width:50px;            height:50px;        Border:thin solid red;            } #second {width:100px;            height:100px;        Border:thin solid red;            } #first {width:200px;            height:200px;        Border:thin solid red; }    </style>" First"> <div id="Second"> <div id="Third"> <button id="Button"> Event bubbling </button> </div> </div> </div> <script>document.getElementById ("Button"). AddEventListener ("Click", function () {alert ("Button"); },false); document.getElementById ("Third"). AddEventListener ("Click", function () {alert ("Third"); },false); document.getElementById ("Second"). AddEventListener ("Click", function () {alert ("Second"); },false); document.getElementById (" First"). AddEventListener ("Click", function () {alert (" First"); },false); </script></body>
At this point, we only click on the button element, the effect is as follows:

As you can see, although we only clicked on the button element, the events on the third, second, and first outside of the button are triggered from the inside out, and the order of the triggering is from the lower layer of the DOM tree to the top of the DOM tree, so called bubbling .
( Note: Although here I used the DOM2 level event handler, and set each event to occur for the bubbling phase, but even with the DOM0 level, the results are the same, bubbling is the default )
But what if we don't want events to bubble? So how do you stop events from bubbling ?
In fact, the object of the event has a stoppropagation () method that prevents the event from bubbling, and we only need to modify the event handler for the button in the previous example as follows:
        document.getElementById ("button"). AddEventListener ("click" , Function (event) {            alert ("button");             Event . Stoppropagation ();            }, false);
This way, when you click the button, only a pop-up window pops up, showing the button.
Note: All modern browsers support event bubbling, but there are some differences in implementation.
Part II: Event Capture
Event capture and event bubbling are just the opposite, and event capture means that less specific nodes should receive the event earlier, and the most specific node should receive the event at the end. An example is shown below:
<! DOCTYPE html>"en">"UTF-8"> <title>bubble</title> <style>button{background:red;        Color:white;            } #third {width:50px;            height:50px;        Border:thin solid red;            } #second {width:100px;            height:100px;        Border:thin solid red;            } #first {width:200px;            height:200px;        Border:thin solid red; }    </style>" First"> <div id="Second"> <div id="Third"> <button id="Button"> Event bubbling </button> </div> </div> </div> <script>document.getElementById ("Button"). AddEventListener ("Click", function () {alert ("Button"); },true); document.getElementById ("Third"). AddEventListener ("Click", function () {alert ("Third"); },true); document.getElementById ("Second"). AddEventListener ("Click", function () {alert ("Second"); },true); document.getElementById (" First"). AddEventListener ("Click", function () {alert (" First"); },true); </script></body>
As you can see this example, I just changed the third parameter of the AddEventListener () method from False in the previous example to true, that is, using the capture method to get the button, the result is as follows:
We can see that the outermost event is triggered first, and finally the button event that we clicked is triggered, which is the event capture.
Note: Although this is the event stream presented by Netscape Navigator, all browsers now support this event flow model. but because older browsers don't support it, very few people use event capture. 
Part III: DOM Event flow
The time flow specified in the DOM2 level event consists of three stages:

 
  

  
   
 
    
Event Capture Phase
 
    
In the target phase
 
    
Event bubbling Phase
 
   
 
  
Note: In the DOM event stream, the actual target does not receive an event during the capture phase, the next phase is in the target phase, and the event is triggered and finally enters the event bubbling phase. We believe that being in the target phase is part of the event bubbling phase. 
Two kinds of event streams in JavaScript