addEventListener has three parameters: the first parameter represents the event name (excluding on, such as "click"); the second parameter represents the function to receive event processing; the third parameter is useCapture, which will be explained in this article.
The code copy is as follows:
<div id="outDiv">
<div id="middleDiv">
<div id="inDiv">Please click the mouse here. </div>
</div>
</div>
<div id="info"></div>
The code copy 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. The order of triggering is determined based on the display of info. There are three addEventListeners, and the optional values of useCapture are true and false, so 2*2*2 can be obtained 8 different programs.
•When all are false, the triggering order is: inDiv, middleDiv, outDiv;
•When all are true, the triggering order is: outDiv, middleDiv, and inDiv;
• When outDiv is true, others are false, the triggering order is: outDiv, inDiv, and middleDiv;
• When middleDiv is true, others are false, the triggering order is: middleDiv, inDiv, outDiv;
•…
Finally, the following conclusions were drawn:
•The trigger order of true is always before false;
•If multiple are true, the trigger of the outer layer precedes the inner layer;
•If multiple are false, the trigger of the inner layer precedes the outer layer.
The above is all about this article, I hope you like it.