先生と生徒の会話形式で理解しよう

生徒

「先生、ボタンをクリックしたら親の要素まで勝手に処理が伝わることがあるんですが、これはどういうことですか？」

先生

「それはイベントの伝播、つまりバブリングやキャプチャリングの仕組みです。イベントは単に発生するだけでなく、HTMLの階層構造に沿って親要素や子要素に伝わる性質があります。」

生徒

「親や子に伝わるって、どういう順番で伝わるんですか？」

先生

「順番は二通りあります。キャプチャリングは親から子へ、バブリングは子から親へ伝わる流れです。具体的な動きをコード例で見てみましょう。」

1. イベントの伝播とは？

イベントの伝播とは、ユーザーの操作によって発生したイベントが、HTMLの階層構造に沿って関連する要素に広がることです。例えば、ボタンをクリックしたとき、そのボタンだけでなく、親の

やまで処理が伝わることがあります。

この伝播の仕組みを理解しておくと、イベントを適切に制御でき、意図しない動作を防ぐことができます。

2. バブリング（Bubbling）とは？

バブリングとは、子要素で発生したイベントが、親要素へ順に伝わっていく仕組みです。水の泡が下から上に上がるイメージで考えるとわかりやすいです。


const parent = document.getElementById("parent");
const child = document.getElementById("child");

parent.addEventListener("click", function() {
  console.log("親要素がクリックされました");
});

child.addEventListener("click", function() {
  console.log("子要素がクリックされました");
});

子要素をクリックすると、まず子の処理が実行され、その後に親の処理も実行されます。これがバブリングです。

3. キャプチャリング（Capturing）とは？

キャプチャリングはバブリングの逆で、親要素から子要素へ順にイベントが伝わる仕組みです。波が岸に向かって押し寄せるようなイメージです。


parent.addEventListener("click", function() {
  console.log("親要素のキャプチャリング処理");
}, true); // 第三引数trueでキャプチャリングを有効

第三引数にtrueを指定するとキャプチャリングとして扱われ、親から子へ順に処理が行われます。

4. 伝播を止める方法

場合によっては、イベントが親要素に伝わらないように制御したいことがあります。その場合はevent.stopPropagation()を使います。


child.addEventListener("click", function(event) {
  console.log("子要素の処理");
  event.stopPropagation(); // 親要素への伝播を止める
});

これにより、子要素の処理だけが実行され、親のイベントハンドラーは呼ばれません。

5. バブリングとキャプチャリングの使い分け

通常はバブリングがデフォルトで使われます。親要素にまとめてイベント処理をしたい場合はバブリング、親から順番に処理したい場合はキャプチャリングを使います。どちらを使うかは、目的に応じて選ぶと良いです。

6. 練習のすすめ

親要素と子要素を作り、クリックイベントにバブリングとキャプチャリングを設定してみましょう。stopPropagationも使って動作を確認すると、イベント伝播の仕組みが自然に理解できます。実際に手を動かすことで、イベントの順番や伝播の流れが直感的にわかるようになります。

JavaScriptのイベントの伝播（バブリング・キャプチャリング）とは？