Detailed explanation of the useCapture_javascript technique of the three parameters of addEventListener

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 is explained in this article.

Copy code The code is as follows:

Please click here.

Copy code The 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" "
"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML = "middleDiv" "
"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML = "inDiv" "
"; }, 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, we can get 8 different programs.

•When all are false, the triggering order is: inDiv, middleDiv, outDiv;
•When all are true, the triggering order is: outDiv, middleDiv, inDiv;
•When outDiv is true and others are false, the triggering sequence is: outDiv, inDiv, middleDiv;
•When middleDiv is true and others are false, the triggering order is: middleDiv, inDiv, outDiv;
•……

Finally, we came to the following conclusion:

•The triggering order of true is always before false;
•If multiple are true, the outer layer is triggered before the inner layer;
•If multiple are false, the inner layer is triggered before the outer layer.

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