When a DOM element binds multiple events, it first performs a bubbling or capturing

Events that are bound to clicked elements occur in code order, and other elements are bubbling or capturing "perceived" events, which, according to the criteria of the standard, capture the event, and then a bubbling event occurs. The order of all events is: Other elements capture phase events--This element code order event--and other element bubbling phase events.

A DOM element binds two events, one bubbling, one capture, then how many times the event executes, and how the order is executed.

First, let's look at what bubbles and captures are all about:

1. Bubbling

Bubbling is the event that is triggered from the bottom up, when the DOM element is bound, when the element is the target element, and after the target element executes, its ancestor element-bound events are executed in ascending order. As shown in the following code, four nested div:

The third parameter of the AddEventListener function is set to False to indicate that the event is not captured, which is the bubbling event.

<div id= ' one ' > <div id= ' both ' > <div id= ' three ' > <div id= ' four ' > </div> </ div> </div></div><script type= ' Text/javascript ' >varOne=document.getelementbyid (' One '); varTwo=document.getelementbyid (' both ')); varThree=document.getelementbyid (' three '); varFour=document.getelementbyid (' Four '); One.addeventlistener (' Click ',function() {alert (' One '); },false); Two.addeventlistener (' Click ',function() {alert (' Both '); },false); Three.addeventlistener (' Click ',function() {alert (' Three '); },false); Four.addeventlistener (' Click ',function() {alert (' Four '); },false);</script>

The order in which the code is executed is:

Click one element to output one;

Click on the element, and the output is one;

Click three element, output three one;

Click on the four element to output four three.

2. Capture

Capture is the opposite of bubbling, when the target element is triggered, it is executed from the topmost ancestor element of the target element to the target element.

To change the third parameter of the above code to TRUE, the execution results are as follows:

Click one to output one;

Click on the output of one or the other.

Click Three, output one of the three;

Click on four to output one or both three four;

It is clear that the order of execution is different.

3. When an element binds two events, one bubbles, one captures

First, the element performs the capture phase first, whether it is a bubbling event or a capture event.

From the top down, if there is a capture event, execute; after it has been down to the target element, the bubbling element is executed up from the target element, that is, the element of the third binding event with a false argument. (During the up execution, the captured events that have been performed are no longer executed, only the bubbling events are performed.) )

The following code:

 one.addeventlistener (' click ', function   ( {Alert ( ' one '  true   ' click ', function   ' both '  false   ' click ', function   ' three '  true   ' click ', function   ' four '  false ); 

Now Click on the four element, the four element is the target element, one is the root element ancestor, and the execution is judged down from one.

One for capture events, one for output;

A bubble event, ignoring;

Three for capture time, output three;

Four is the target element, and starts bubbling up to execute, and the output is a two-part understanding that is easier to understand. ）

Three for capture has been performed, ignored;

The bubble event, the output of both;

One for capture has been performed, ignored.

The result of the final execution is: one three four

(There may be a question here, what is the difference between the target element and the event?) My test results are no different, regardless of whether the target element is capture or bubbling, in the case of the first capture from the root element to the target element, and then from the target element to execute. )

For example,three as the target element , with the result of one three (because both are bubbling events and are not executed when executed down).

Execution times: Several events are bound and executed several times.

In the following code, the two elements are bound to two different events, and a single click will execute both events. And the order of execution differs

One.addeventlistener (' click ',function() {alert (' One ');},true); Two.addeventlistener (' Click ',function() {alert (' Two,bubble ');},false); Two.addeventlistener (' Click ',function() {alert (' Two,capture ');},true); Three.addeventlistener (' Click ',function() {alert (' Three,bubble ');},true); Four.addeventlistener (' Click ',function() {alert (' Four ');},true);

1, if the target element is the object element, the things are executed sequentially, and other elements are executed according to the criteria of the standard, that is, after the first capture and bubbling.

Click on the result of the execution: one (because it is the parent element that supports capturing events so it executes first) two,bubble two,capture (sequential execution, note that the comma is not an interval, is the output content.) )

2. If the target element is not two, then two of the two events are triggered after the first capture, which is the same as the execution procedure discussed earlier, except that two events are bound to the same DOM element.

Click Three to execute the result: one two,capture three,bubble two,bubble

The order of all events is: Other elements capture phase events--This element code order event--and other element bubbling phase events.

When a DOM element binds multiple events, Bubbles or captures are performed first