addEventListener()

構文

addEventListenter(eventType, callback, useCapture);

第1引数：イベントの種類
第2引数：実行する関数
第3引数：イベントの伝達方式の設定。trueにするとキャプチャリングとなる

ありま

Bubbling / Capturing

└「About」をクリックすると親の「.nav__links」「.nav」の背景色も変更される

https://codepen.io/mnottsu1/pen/abrVKKr

ありま

キャプチャリングを使用したパフォーマンスの向上

<ul class="nav__links">
  <li class="nav__item"><a href="#" class="nav__link">About</a>
  <li class="nav__item"><a href="#" class="nav__link">Product</a>
  <li class="nav__item"><a href="#" class="nav__link">Contact</a>
  </li>
</ul>

// 🔴 イベントリスナを付与する対象が多いとパフォーマンスに影響する
document.querySelectorAll('.nav__link').forEach(link => {
  link.addEventListener('click', callback)
})

// 🟢 親要素にイベントリスナを付与する
document.querySelector('.nav__links').addEventListener('click', function(e) {
  if(!e.target.classList.contains('nav__link')) return;
})

ありま

beforeunload

window, document, およそそのリソースがアンロードされる直前に発生する
Webページがダイアログボックスを表示し、ユーザーにページを終了するかどうかの確認を求めることができる

window.addEventListener('beforeunload', function(e) {
  // Cancel the event as stated by the standard.
  e.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = "";
})