JavaScript イベントのバブリングとは

JavaScriptのイベントのバブリングとキャンセルについてです。

サンプル	イベントのバブリング
	イベントのバブリングをキャンセルさせる

イベントのバブリング

イベントのバブリングとは、発生したイベントが上位の要素に伝播することです。
「イベントの伝播」ともいいます。
以下は、MDNのイベント伝播 (propagation)のリンクです。
https://developer.mozilla.org/ja/docs/DOM/DOM_Reference/Examples#Example_5.3A_Event_Propagation

イベントのバブリングのサンプル

「一段目」をクリックすると、アラートが表示されます。
「二段目」をクリックすると、イベントの伝播のためアラートが2つ表示されます。

一段目

二段目

上記サンプルのコードです。

<div id="div1"> 一段目
  <div id="div2">二段目</div>
</div>

<script>
  const div1 = document.getElementById("div1");
  const div2 = document.getElementById("div2");

  div1.addEventListener("click", function (e) {
    alert("一段目のイベントリスナ");
  });
  div2.addEventListener("click", function (e) {
    alert("二段目のイベントリスナ");
  });
</script>

1行目の「一段目」という文字をクリックすると9行目のイベントリスナが実行されます。
2行目の「二段目」という文字をクリックすると12行目のイベントリスナが実行された後、9行目のイベントリスナも実行されます。
→イベントの伝播(バブリング)です。

イベントのバブリングをキャンセルさせる

イベントオブジェクト.stopPropagation();

イベントのバブリングのキャンセルはstopPropagationメソッドを使用します。
イベントオブジェクトのメソッドです。
「イベントのキャンセル」は、「イベントの抑制」ともいいます。
以下は、MDNのstopPropagationのリンクです。
https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation

キャンセルのサンプル

「一段目」をクリックすると、アラートが表示されます。
「二段目」をクリックしても、イベントのバブリングのキャンセルをしているため、アラートは1つしか表示されません。

一段目

二段目

上記サンプルのコードです。

<div id="div3">一段目
  <div id="div4">二段目</div>
</div>

<script>
  const div3 = document.getElementById("div3");
  const div4 = document.getElementById("div4");

  div3.addEventListener("click", function (e) {
    alert("一段目のイベントリスナ");
  });
  div4.addEventListener("click", function (e) {
    alert("二段目のイベントリスナ");
    e.stopPropagation();
  });
</script>

14行目にstopPropagationメソッドを追加しています。
2行目の「二段目」という文字クリックすると12行目のイベントリスナが実行された後、9行目のイベントリスナは実行されません。