BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】addEventListenerのuseCaptureパラメータが理解できない。

2022-03-27 05:36:45

質問

の記事を読みました。 https://developer.mozilla.org/en/DOM/element.addEventListener が、理解できない。 useCapture 属性があります。定義があります。

useCapture が true の場合、ユーザがキャプチャを開始したいことを示します。キャプチャを開始すると、指定されたタイプのすべてのイベントは、DOM ツリーでその下にある任意の EventTargets にディスパッチされる前に、登録されたリスナーにディスパッチされるようになります。ツリーを上方に流れるイベントは、キャプチャを使用するように指定されたリスナーをトリガしません。

このコードでは、親イベントが子イベントより先にトリガーされるため、このコードが理解できません。 Documentオブジェクトはusecaptureをtrueに設定し、子divはusecaptureをfalseに設定し、document usecaptureに従いました。 

function load() {
  document.addEventListener("click", function() {
    alert("parent event");
  }, true);

  document.getElementById("div1").addEventListener("click", function() {
    alert("child event");
  }, false);
}

<body onload="load()">
  <div id="div1">click me</div>
</body>

解決方法は？

イベントは2つの場面で起動することができます。開始時 ("capture") と終了時 ("bubble") です。 イベントは、定義された順番に実行されます。例えば、4つのイベントリスナーを定義したとする。 

window.addEventListener("click", function(){console.log(1)}, false);
window.addEventListener("click", function(){console.log(2)}, true);
window.addEventListener("click", function(){console.log(3)}, false);
window.addEventListener("click", function(){console.log(4)}, true);

ログメッセージはこの順番で表示されます。

  • 2 (最初に定義され capture=true )
  • 4 (2番目の定義は capture=true )
  • 1 (最初に定義されたイベントを capture=false )
  • 3 (2つ目の定義されたイベントである capture=false )

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します