[JS30] -25) Event Capture, Bubbling, Propagation and Once

4926 ワード
once stopPropagation capturing bubbling event delegation テキストリンク

Bubbling

  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>

親divにclickイベントを登録し、一番奥のオレンジ色をクリックします.
イベントはサブdivからBubblingされ、3、2、1の順に出力されます.

Capturing

 divs.forEach(div => div.addEventListener('click', logText, {
   once: true
 }));
captureがtrueの場合、イベントキャプチャは親divから子divに伝播し、1、2、3の順序で出力されます.

Once

divs.forEach(div => div.addEventListener('click', logText, {
  capture: true,
  once: true
}));
Onceがtrueに設定されている場合は、イベント呼び出しを一度取り出して無効にします.

stopPropagation

function logText(e) {
    e.stopPropagation();
  }

  divs.forEach(div => div.addEventListener('click', logText, {
    capture: true,
    once: true
  }));
stopPropagationは委任活動を阻止する.

Reference

  • https://ko.javascript.info/bubbling-and-capturing
    • TIL 2021.07.28 | (SQL) Subquery 1
    js学習ノート----進級Day 06 js対象と閉パッケージ