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

nas2018/01/03

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

目次

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

イベントのバブリング

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

「一段目」をクリックすると、アラートが表示されます。
「二段目」をクリックすると、イベントの伝播のためアラートが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行目のイベントリスナは実行されません。

関連の記事

JavaScript イベントリスナを登録するサンプル(addEventListener)
JavaScript イベントを無効化する(preventDefault)

△上に戻る