JavaScriptのイベント伝播とは？バブリングとキャプチャリングをJavaエンジニア向けにやさしく解説！
山崎講師
こんにちは。ゆうせいです。
今回は、Javaを学んできた新人エンジニアのみなさんに向けて、JavaScriptのイベント伝播（event propagation）についてわかりやすく解説していきます。
JavaScriptにおける「イベント伝播」は、DOM（Document Object Model）上でイベントがどのように流れて処理されるかを意味します。
一見Javaのイベントリスナーに似ている部分もありますが、JavaScript特有の仕組みが存在します。
イベント伝播とは？
JavaScriptでボタンをクリックしたとき、そのイベントが親の要素や祖先の要素にまで影響を及ぼすことがあります。
その仕組みこそが「イベント伝播」です。
イベント伝播には、次の2つのフェーズがあります。
| フェーズ名 | 説明 |
|---|---|
| キャプチャリング（捕捉） | 一番外側の要素から内側の要素へ向かって伝播していく段階 |
| バブリング（泡上がり） | 内側の要素から外側の要素へ向かって伝播していく段階 |
これらを理解することで、意図しないイベントの発火や、イベントの制御ミスを防ぐことができます。
具体的な例でイメージしよう
たとえば、HTMLに次のような構造があるとしましょう。
<div id="parent">
<button id="child">クリック</button>
</div>
このとき、#child（ボタン）をクリックすると、
- キャプチャリングでは、
document → html → body → #parent → #childという順番でイベントが下に降りてきます。 - バブリングでは、逆に
#child → #parent → body → html → documentとイベントが泡のように上へ上っていきます。
Javaとの違いに注意！
JavaのAWTやSwingでは、リスナーを登録したコンポーネントにしかイベントが届かないことがほとんどです。
しかし、JavaScriptでは親要素にも自動的にイベントが「伝播」するのがポイントです。
JavaScriptのコードで確認
document.getElementById("parent").addEventListener("click", function() {
console.log("親がクリックされました");
});
document.getElementById("child").addEventListener("click", function() {
console.log("子がクリックされました");
});
このコードでボタンをクリックすると、出力は次のようになります：
子がクリックされました
親がクリックされました
なぜでしょう？
これは、バブリングがデフォルトで有効だからです。イベントは子要素で発生し、親要素へと伝播していくためです。
キャプチャリングを使いたいときは？
イベントリスナーを設定するとき、第3引数に true を渡すと、キャプチャリングフェーズでイベントをキャッチできます。
document.getElementById("parent").addEventListener("click", function() {
console.log("キャプチャ中の親");
}, true);
このコードだと、キャプチャリング中にイベントが処理されます。
イベントを止めるには？
イベントの伝播を途中で止めたい場合、次のメソッドを使います：
event.stopPropagation()
これを使うと、イベントが親要素へバブリングまたはキャプチャリングしなくなります。
document.getElementById("child").addEventListener("click", function(event) {
event.stopPropagation();
console.log("子だけ処理されました");
});
まとめ：イベント伝播の流れを図で確認！
キャプチャリングフェーズ
document
↓
html
↓
body
↓
div（親）
↓
button（子） ← イベント発生！
↑
div（親）
↑
body
↑
html
↑
document
バブリングフェーズ
メリットとデメリット
| 観点 | メリット | デメリット |
|---|---|---|
| バブリング | 親要素でイベントをまとめて処理できる（効率的） | 意図しない箇所でイベントが発火する可能性がある |
| キャプチャ | イベントの早い段階で処理を制御できる | 設定に true を明示しないと使われないため、使い方が少し特殊 |
| stopPropagation | 柔軟にイベント伝播を止められる | 過剰に使うと保守性が下がる可能性がある |
今後の学習の指針
次のステップとしては、以下の学習をオススメします。
event.targetとevent.currentTargetの違い- 委譲（イベントデリゲーション）による効率的なハンドリング
- ReactやVueなど、フレームワークでのイベント管理の仕組み
イベント伝播はJavaScriptを使った開発の基礎中の基礎です。
Javaの知識を持っているからこそ、違いに敏感に気づけるはず！ぜひ手を動かして感覚を掴んでいきましょう。
他にも気になるテーマがあれば、どんどん聞いてくださいね！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
