UseCapture and addEventListener are the three parameters of addeventlistener.

UseCapture and addEventListener are the three parameters of addeventlistener.

AddEventListener has three parameters: the first parameter indicates the event name (not including on, such as "click"); the second parameter indicates the function for Receiving Event processing; the third parameter is useCapture, this article will explain it.

Copy codeThe Code is as follows:
<Div id = "outDiv">
<Div id = "middleDiv">
<Div id = "inDiv"> click here. </Div>
</Div>
</Div>
<Div id = "info"> </div>

Copy codeThe Code is as follows:
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. Based on the display of info, we can determine the trigger order. There are three addEventListener options, and the optional values of useCapture are true and false, SO 2*2*2, we can get 8 different programs.

• When all values are false, the trigger sequence is inDiv, middleDiv, and outDiv;
• When all values are true, the trigger sequence is outDiv, middleDiv, and inDiv;
• When outDiv is true and others are false, the trigger sequence is outDiv, inDiv, and middleDiv;
• If middleDiv is set to true and other values are set to false, the trigger sequence is middleDiv, inDiv, and outDiv;
•......

Finally, the following conclusions are drawn:

• The trigger sequence of true is always before false;
• If multiple triggers are true, the triggering of the outer layer prevails over the inner layer;
• If multiple triggers are false, the triggering of the inner layer prevails over the outer layer.

The above is all the content of this article. I hope you will like it.