Explication détaillée de la technique useCapture_javascript des trois paramètres de addEventListener

addEventListener a trois paramètres : le premier paramètre représente le nom de l'événement (à l'exclusion de on, tel que "click") ; le deuxième paramètre représente la fonction pour recevoir le traitement de l'événement ; le troisième paramètre est useCapture, qui est expliqué dans cet article.

Copier le code Le code est le suivant :

Veuillez cliquer ici.

Copier le code Le code est le suivant :

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);

Ce ci-dessus est le code que nous avons testé. L'ordre de déclenchement est déterminé en fonction de l'affichage des informations. Il existe trois addEventListeners, et les valeurs facultatives de useCapture sont true et false, donc 2*2*2. , nous pouvons obtenir 8 programmes différents.

•Lorsque tous sont faux, l'ordre de déclenchement est : inDiv, middleDiv, outDiv
•Quand tout est vrai, l'ordre de déclenchement est : outDiv, middleDiv, inDiv
 ; •Lorsque outDiv est vrai et que d'autres sont faux, la séquence de déclenchement est : outDiv, inDiv, middleDiv
 ; •Lorsque middleDiv est vrai et que les autres sont faux, l'ordre de déclenchement est : middleDiv, inDiv, outDiv
 ; •……

Finalement, nous sommes arrivés à la conclusion suivante :

•L'ordre de déclenchement de vrai est toujours avant faux ;
•Si plusieurs sont vrais, la couche externe est déclenchée avant la couche interne
 ; •Si plusieurs sont faux, la couche interne est déclenchée avant la couche externe.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.