AddEventListener () The third parameter usecapture (Boolean) Detailed Parsing _ basics

Example

<div id= "Div1" >
<div id= "Div2" >
<div id= "Div3" >
<div id= "Div4" >
</div>
</div>
</div>
</div>

If you click the mouse on the D3, the event flow is this:

The capture phase detects whether an event handler with Usecapture is true at Div1 and, if so, executes the program and then processes the DIV2 again.

Target phase at Div3, found Div3 is the mouse click node, so this is the target phase, if there is an event handler, then execute the program, here regardless of usecapture true or false.

The bubbling phase detects if there is an event handler with usecapture false at Div2, executes the program, and then processes the DIV1 again.

AddEventListener has three parameters: the first parameter represents the event name (without on, such as "click"), the second parameter represents the function to receive event handling, and the third parameter is usecapture, which is explained in this article.

<div id= "Outdiv" >
<div id= "Middlediv" >
<div id= "Indiv" > Please click here. </div>
</div>
</div>

<div id= "Info" ></div>

var outdiv = document.getElementById ("Outdiv");
var middlediv = document.getElementById ("Middlediv");
var indiv = document.getElementById ("Indiv");
var info = document.getElementById ("info");

Outdiv.addeventlistener ("click", Function () {info.innerhtml + = "Outdiv" + "<br>";}, False);
Middlediv.addeventlistener ("click", Function () {info.innerhtml + = "Middlediv" + "<br>";}, False);
Indiv.addeventlistener ("click", Function () {info.innerhtml + = "Indiv" + "<br>";}, False);

The above is the code we tested, according to the display of info to determine the sequence of the trigger, there are three AddEventListener, and usecapture optional value is true and false, so 2*2*2, can draw 8 different procedures.

• When all false, the triggering sequence is: Indiv, Middlediv, Outdiv;

• When all is true, the triggering sequence is: Outdiv, Middlediv, Indiv;

Outdiv is true and the other is false, the triggering order is: Outdiv, Indiv, Middlediv;

Middlediv is true and the other is false, the triggering order is: Middlediv, Indiv, Outdiv;

•......

Finally come to the following conclusions:

The trigger order of the true is always before false;

• If multiple are true, the outer trigger is preceded by the inner layer;

• If multiple are false, the inner trigger is preceded by the outer layer.