AddEventListenerの3つのパラメーター、UseCaptureの詳細な説明

AddEventListenerには3つのパラメーターがあります。最初のパラメーターはイベント名を表します（「クリック」など、オンを除く）。 2番目のパラメーターは、イベント処理を受信する関数を表します。 3番目のパラメーターはUseCaptureで、この記事で説明します。

コードコピーは次のとおりです。

<div id = "oututdiv">

<div id = "middlediv">

<div id = "indiv">こちらのマウスをクリックしてください。 </div>

</div>

</div>

<div id = "info"> </div>

コードコピーは次のとおりです。

var outdiv = document.getElementById（ "oututdiv"）;

var middlediv = document.getElementById（ "Middlediv"）;

var indiv = document.getElementById（ "indiv"）;

var info = document.getElementById（ "Info"）;

outdiv.addeventlistener（ "click"、function（）{info.innerhtml + = "oututdiv" + "<br>";}、false）;

middlediv.addeventlistener（ "click"、function（）{info.innerhtml + = "middlediv" + "<br>";}、false）;

indiv.addeventlistener（ "click"、function（）{info.innerhtml + = "indiv" + "<br>";}、false）;

上記は、テストしたコードです。トリガーの順序は、情報の表示に基づいて決定されます。 3つのAddEventListenersがあり、UseCaptureのオプションの値はTrue and Falseであるため、2*2*2は8つの異なるプログラムを取得できます。

•すべてが虚偽の場合、トリガー順序は次のとおりです。

•すべてが真である場合、トリガー順序は次のとおりです。

•Outdivが真である場合、他の人は虚偽であり、トリガー順序は次のとおりです。

•Middledivが真である場合、他の人は虚偽であり、トリガー順序は次のとおりです。

•…

最後に、次の結論が導入されました。

•Trueのトリガー順序は常にFalseの前です。

•複数の場合、外側の層のトリガーが内側の層の前にあります。

•複数が偽の場合、内層のトリガーが外側の層に先行します。

上記はこの記事のすべてです。あなたがそれを気に入ってくれることを願っています。