Examples of capturing and bubbling in JavaScript, and javascript bubbling

Examples of capturing and bubbling in JavaScript, and javascript bubbling

Capture/block capture, bubble/block bubbling in JavaScript

The event stream describes the sequence of events received from the page. The concept of event stream is exactly Internet Explorer and Netscape. However, the former proposes a common event bubble stream, while the latter proposes an event capture stream.

Part 1: Event bubbling

That is to say, events are received by the most specific elements, and then gradually spread to less specific nodes (documents ).

The following is a simple example:

<! DOCTYPE html> 
At this moment, weClick button onlyElement, the effect is as follows:


We can see that although we only click the button element, the events on third, second, and first outside the button are triggered from the inside out, the trigger sequence is from the lower layer of the DOM tree to the top of the DOM tree.Bubble.
(Note: Although I use the DOM2-level event handler and set each event to the bubble stage, even if the DOM0-level event is used, the result is the same. The bubble stage is the default one.)
But what if we don't want event bubbling? SoHow to Prevent event bubbles?
In fact, the event object has a stopPropagation () method to prevent event bubbling. We only need to modify the event handler of the button in the previous example as follows:
document.getElementById("button").addEventListener("click",function(event){   alert("button");   event.stopPropagation();   },false);
In this way, after clicking the button, only a pop-up window is displayed, showing the button.
Note: all modern browsers support event bubbling, but there are some differences in implementation.
Part 2: Event capture
Event capture is the opposite of event bubbles. Event capture means that a node that is not specific should receive the event earlier, and the most specific node should finally receive the event. For example:
<! DOCTYPE html> 
As you can see, in this example, I just changed the third parameter of the addEventListener () method from false in the previous example to true, that is, the capture method is used to get the button. The result is as follows:

We can see that the event at the outermost layer is triggered first, and the button event we click is triggered. This is event capture.
So how can we prevent event capture? Use the event. stopPropagation () method? The answer is no. here you need to know,The stopPropagation () method can only prevent event bubbles, but cannot prevent event capture.
However, we can use the DOM3-level new event stopImmediatePropagation () method to prevent event capture. In addition, this method can also prevent event bubbles. The application is as follows:
document.getElementById("second").addEventListener("click",function(){ alert("second"); event.stopImmediatePropagation();},true); 
In this way, the event capture can be blocked at the id of second.
Note: although this is the event stream proposed by Netscape Navigator, all browsers now support this event stream model.However, because the old browser does not support this function, event capture is rarely used.
Part 3: DOM event stream
The specified time stream for DOM2 events consists of three phases:

  
 
 
   
Event capture phase
 
 
   
In target stage
 
 
   
Event bubble stage

  
Note: In the DOM event stream, the actual target will not receive the event in the capture phase, and the next stage is in the target phase. At this time, the event is triggered and finally enters the event bubble phase. We thinkBeing in the target stage is part of the event bubble stage.
Thank you for reading this article. I hope it will help you. Thank you for your support for this site!