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

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

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

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

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

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

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