【JavaScript入門】イベントのバブリングとキャプチャリング

バブリングとキャプチャリングとは
親要素にのみイベントリスナーを追加した例
親要素と子要素の両方にイベントリスナーを追加した例

バブリングとキャプチャリングとは

ある要素をクリックしたとき、そのクリックイベントが発生するまでに以下の3フェーズを経ます。

フェーズ	説明
キャプチャリングフェーズ	windowオブジェクトからイベントが発生した要素に向かっていくフェーズ
ターゲットフェーズ	イベントが発生した要素に到着したフェーズ
バブリングフェーズ	イベントが発生した要素からwindowオブジェクトへ向かって行くフェーズ

このとき、キャプチャリングフェーズでイベントを実行することをキャプチャリングと呼び、バブリングフェーズでイベントを実行することをバブリングと呼びます。

イベントをキャプチャリングフェースで実行するかバブリングフェースで実行するかはaddEventListenerの第三引数で設定します。

重要

キャプチャリングフェーズで実行したい場合はtrueを指定する。
バブリングフェーズで実行したい場合はfalseを指定する。

以降から、実際にバブリングとキャプチャリングの実装例を見ていきます。

親要素にのみイベントリスナーを追加した例

親要素（水色の部分）をクリックすると「親です！」とアラートが表示されます。
子要素（緑色の部分）をクリックしても「親です！」とアラートが表示されます。

See the Pen
Bubbling1 by shiakisudev (@shiakisu)
on CodePen.

ソースコードは以下のとおりです。

HTML

<div id="parent">
  親 
  <div id="child">
    子
  </div>
</div>

CSS

#parent{
  height:100px;
  width:100px;
  background-color:skyblue;
}

#child{
  height:50px;
  width:50px;
  background-color:lime;
}

window.onload = function(){
  document.getElementById('parent').addEventListener(
  'click',function(){
    alert('親です！')
  },false);
}

親要素と子要素の両方にイベントリスナーを追加した例

親要素（水色の部分）をクリックすると「親です！」とアラートが表示されます。
子要素（緑色の部分）をクリックすると「子です！」とアラートが表示された後に「親です！」とアラートが表示されます。
このように、子要素のイベント発生を契機として親要素のイベントも働くことをバブリングといいます。

See the Pen
Bubbling2 by shiakisudev (@shiakisu)
on CodePen.

ソースコードは以下のとおりです。

window.onload = function(){
  // 親要素クリック時のイベントリスナー
  document.getElementById('parent').addEventListener(
  'click',function(){
    alert('親です！')
  },false);

  // 子要素クリック時のイベントリスナー
  document.getElementById('child').addEventListener(
  'click',function(){
    alert('子です！')
  },false);
}

子要素クリック時に子要素自身のイベントを実行し、親要素へは伝播しないようにする方法

子要素クリック時に子要素自身のイベントを先に実行し、親要素へは伝播しないようにするには、子要素のイベントの中でevent.stopPropagation();を実行する必要があります。
以下の処理では、子要素クリック時に子要素自身のイベント処理が実行され、「子です！」と表示された後、そのまま処理が終了します。

See the Pen
prevent by shiakisudev (@shiakisu)
on CodePen.

ソースコードは以下のとおりです。

window.onload = function(){
  // 親要素クリック時のイベントリスナー
  document.getElementById('parent').addEventListener(
  'click',function(){
    alert('親です！');
  },false);

  // 子要素クリック時のイベントリスナー
  document.getElementById('child').addEventListener(
  'click',function(){
    alert('子です！');
    event.stopPropagation();//親要素へ伝播しないようにする。
  },false);
}

子要素クリック時に親要素のイベントから順に実行したい場合

親要素のaddEventListenerにtrueを設定すると、子要素クリック時に親要素→子要素の順でイベントを実行することができます。これをバブリングといいます。

See the Pen
Bubbling3 by shiakisudev (@shiakisu)
on CodePen.

ソースコードは以下のとおりです。

window.onload = function(){
  // 親要素クリック時のイベントリスナー
  document.getElementById('parent').addEventListener(
  'click',function(){
    alert('親です！')
  },true);

  // 子要素クリック時のイベントリスナー
  document.getElementById('child').addEventListener(
  'click',function(){
    alert('子です！')
  },false);
}

子要素クリック時に親要素のイベントを実行し、子要素へは伝播しないようにする方法

子要素クリック時に親要素のイベントを先に実行し、子要素へは伝播しないようにするには、親要素のイベントの中でevent.stopPropagation();を実行する必要があります。
以下の処理では、子要素クリック時に親要素のイベント処理が実行され、「親です！」と表示された後、そのまま処理が終了します。

See the Pen
bubbling4 by shiakisudev (@shiakisu)
on CodePen.

ソースコードは以下のとおりです。

window.onload = function(){
  // 親要素クリック時のイベントリスナー
  document.getElementById('parent').addEventListener(
  'click',function(){
    alert('親です！')
    event.stopPropagation(); //→子要素へ伝播しないようにする。
  },true); //→子要素クリック時でも親要素のイベントから始まるようにする。

  // 子要素クリック時のイベントリスナー
  document.getElementById('child').addEventListener(
  'click',function(){
    alert('子です！')
  },false);
}