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

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

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

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

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

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）とは？

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

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

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

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

4. 伝播を止める方法

4. 伝播を止める方法

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

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

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

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

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

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

6. 練習のすすめ

6. 練習のすすめ

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