Detailed explanation of the useCapture_javascript technique of the three parameters of addEventListener-JS Tutorial-php.cn

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

WBOY

Release： 2016-05-16 16:09:15

Original

1780 people have browsed it

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.