Capturing/blocking capture, bubbling/blocking bubbling methods in JavaScript _javascript tips

The event flow describes the order in which events are received from the page. It is IE and Netscape that bring up the concept of the event flow, but the former is a common event bubbling stream, and the latter is the event capture stream.

The first part: event bubbling

That is, the event begins to be received by the most specific element, and then propagates up to the less specific node (document).

Here's a simple example:

<!
  DOCTYPE html>  

At this point, we only click the button element, the effect is as follows:

As you can see, although we only clicked on the button element, the third, second, and the events on the top of the button are triggered from the inside out, triggering in the order that the lower layer of the DOM tree is to the top of the DOM tree, so it's called bubbling.

( Note: Although I use the DOM2 level event handler here and set each event to occur for the bubbling phase, even with the DOM0 level, the result is the same, bubbling is the default)

But what if we don't want the event to bubble? So how do you block event bubbling?

In fact, the object of the event has a stoppropagation () method to prevent the event from bubbling, and we just 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);

In this way, after clicking the button, only a pop-up window will pop up, displaying the button.

Note: All modern browsers support event bubbling, but there are some differences in implementation.

Part Two: Event capture

Event capture and event bubbling are just the opposite, event capture means that less specific nodes should receive the event earlier, and the most specific node should receive the event at the end. Examples are as follows:

<!
  DOCTYPE html>  

As you can see in this example, I just changed the third parameter of the AddEventListener () method from the previous example to true, that is, to obtain the button using the Capture method, 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.

So how can we stop the capture of events? Do you want to use the Event.stoppropagation () method? The answer is no, here you know, the Stoppropagation () method can only block the bubbling of events and not prevent event capture.

But we can use the DOM3 level new event Stopimmediatepropagation () method to prevent event capture, and this method can also prevent event bubbling. The application is as follows:

document.getElementById ("Second"). AddEventListener ("click", Function () {

  alert ("second");

  Event.stopimmediatepropagation ();

},true);   

This allows you to block the capture of the event at ID second.

Note: Although this is the event stream presented by Netscape Navigator, all browsers now support this event flow model. However, because older browsers do not support it, 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 stage is in the target phase, 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.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.