addEventListener()の第3パラメータuseCapture(Boolean)の詳細解析_基礎知識

例

d3 上でマウスをクリックすると、イベント フローは次のようになります:

キャプチャフェーズでは、div1 に useCapture を true にしたイベントハンドラがあるかどうかを検出し、存在する場合はプログラムを実行し、div2 も同様に処理します。

ターゲットステージ div3 ではマウスでクリックされたノードが div3 であることが分かりますので、イベントハンドラがあれば useCapture が true か false かに関わらずプログラムが実行されます。

バブリングフェーズでは、div2 に useCapture を false に設定したイベントハンドラがあるかどうかを検出し、存在する場合はプログラムを実行し、div1 も同様に処理します。

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 の場合、外側のレイヤーよりも先に内側のレイヤーがトリガーされます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。