イベントバブリングとキャプチャリングの違いを体験しよう！
山崎講師
こんにちは。ゆうせいです。
今回は、JavaScriptの「イベントバブリング」と「イベントキャプチャリング」について、新人エンジニアの方でも理解しやすいように、図解付きのデモとともに解説します。
そもそも「イベント」とは？
Webページ上でユーザーが行う「クリック」「入力」「スクロール」などの動作は、すべて「イベント」と呼ばれます。
そして JavaScript を使うと、「イベントが起きたときに特定の処理を実行する」という仕組みが作れます。
イベントの伝播とは？
イベントは、ある要素で発生するときに、他の要素にも伝わる性質を持っています。
この伝わり方には2種類あります：
| 名前 | 伝播の方向 | 説明 |
|---|---|---|
| キャプチャリング | 外（祖先）→内（子）へ伝播 | クリックの処理が最上位の要素から順に下へ伝わる |
| バブリング | 内（子）→外（祖先）へ伝播 | 一番深い要素で処理が始まり、親へと伝わっていく |
デモで学ぼう！バブリング vs キャプチャリング
以下のコードを使えば、「どちらが先に発生するのか」を実際にログで見ながら確認できます！
コードの主な構造
<div id="grandparent">
Grandparent
<div id="parent">
Parent
<div id="child">Child</div>
</div>
</div>
JavaScriptのポイント
el.addEventListener("click", handler, true); // キャプチャ
el.addEventListener("click", handler); // バブリング（省略または false）
trueを指定すると キャプチャ段階 のリスナーfalseまたは省略すると バブリング段階 のリスナー
実際の動作を見てみよう
(Sample)
例：Child をクリックしたとき
📥 [キャプチャ] grandparent
📥 [キャプチャ] parent
📥 [キャプチャ] child
📤 [バブリング] child
📤 [バブリング] parent
📤 [バブリング] grandparent
- 📥キャプチャは「上から下へ」
- 📤バブリングは「下から上へ」
これでイベントの流れがよく見えます！
メリット・デメリットの比較
| 特性 | キャプチャ | バブリング |
|---|---|---|
| 発火順序 | 外→内 | 内→外 |
| 初期設定 | 明示しないと有効にならない（true） | デフォルトで有効（省略OK） |
| 用途 | 高度なカスタマイズが必要な時 | 一般的なイベント処理、イベント委任など |
| 注意点 | 設定忘れによる想定外の挙動 | stopPropagationしないと多重発火の危険 |
実践ポイント！
「バブリング」を使う場面
- 頻出のイベント委任（親要素でまとめてクリック処理など）に使われます。
「キャプチャリング」を使う場面
- 特定の順序でイベント処理を制御したいとき
- Webコンポーネントやライブラリでの高度なイベント制御
最後にひとこと
イベントの伝播は、Web開発では避けて通れない基礎知識です。
このように「ログで見える化」すると理解がグッと深まります。
今後のステップとしては：
e.stopPropagation()を使って伝播を止める練習onceやpassiveなどのオプション付きイベントの活用- イベント委任をつかった効率的なコード設計
こういった点をぜひ試してみてください！「見る」「書く」「壊す」のサイクルで学ぶのが最短コースですよ！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
