addEventListener の 3 つのパラメータの useCapture_javascript テクニックの詳細な説明

addEventListener には 3 つのパラメーターがあります。最初のパラメーターはイベント名 (「click」などを除く) を表し、2 番目のパラメーターはイベント処理を受け取る関数を表します。3 番目のパラメーターは、この記事で説明されています。

コードをコピーします コードは次のとおりです:

ここをクリックしてください。

コードをコピーします コードは次のとおりです:

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

上記は、情報の表示に基づいてトリガーの順序が決定され、useCapture のオプションの値は true と false であるため、2*2*2 になります。 、8つの異なるプログラムを取得できます。

•すべてが false の場合、トリガーの順序は inDiv、middleDiv、outDiv です。
•すべてが true の場合、トリガーの順序は outDiv、middleDiv、inDiv です。 •outDiv が true で、その他が false の場合、トリガー シーケンスは outDiv、inDiv、middleDiv
になります。 •middleDiv が true で、その他が false の場合、トリガーの順序は、middleDiv、inDiv、outDiv
です。 •……

最終的に、次の結論に達しました:

•true のトリガー順序は常に false より前です。

•複数の値が true の場合、外側のレイヤーが内側のレイヤーよりも先にトリガーされます。 •複数の値が false の場合、外側のレイヤーよりも先に内側のレイヤーがトリガーされます。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。