[JavaScript]イベント転送/イベントバッファ、キャプチャ

8017 ワード
JavaScript テキストリンク
JavaScriptでは、イベントは自分だけではありません.
イベントは親と子のタグに送信されます.
これらのイベントには2つの転送方法があります.

イベントBubbling/イベントBubbling


イベントBubblingとは、イベントが発生したときに親(親)タグを検索してイベントを伝播する方法です.
 <body>
    <div class="one">
      one
      <div class="two">
        two
        <div class="three">three</div>
      </div>
    </div>
 </body>
var divs = document.querySelectorAll("div");
divs.forEach(function (div) {
 div.addEventListener("click", logEvent);
});

function logEvent(event) {
 console.log(event.currentTarget.className);
}

上記のコードで3種類のイベントがトリガーされると、
「click」イベントの親(親)タグが同じイベントも実行されます.
var one = document.querySelector(".one");
var two = document.querySelector(".two");
var three = document.querySelector(".three");

one.addEventListener("click", logEvent);
two.addEventListener("mouseover", logEvent);
three.addEventListener("click", logEvent);

function logEvent(event) {
  console.log(event.currentTarget.className);
}
同じHTMLで"click"から"mouseover"に変更されました

3つのクラスにマウスを置くと、2つのコンソールが表示されます.
3つのクラスをクリックすると、3つまたは1つのコンソールが表示されます.
(異なるイベントであるため、2つのクラスは無視されます!)

イベントのキャプチャ/イベントのキャプチャ


イベントが開いている場合は、バブル化とは逆です.
イベントが発生した場合は、トップレベルのラベルbodyラベルから
イベント発生ラベルにイベントを伝播します.
  div.addEventListener("click", logEvent, true);
既存のaddEventListenerメソッドは、イベントbundlingをdefault(false)値に指定します.
したがって、第3のパラメータにtrueを入れると、イベントリスナーは、イベントキャプチャ方式で登録される.
既存のコードで上記の変更を行い、3つのイベントを実行します.
コンソールは最上位oneクラスから出力されます.
[Programmers](python)キーボード-2020ココア実習を押す
りんごの木