【2026年最新】バブリングとは？JSイベント伝播の仕組みと停止法

JavaScriptのイベントリスナー（addEventListener）は、デフォルト状態でこのバブリングフェーズを検知して関数を実行するように設計されています。この仕様を意識せずに親要素と子要素の双方に処理を記述していると、意図しない多重実行やレイアウト崩れといった不具合の原因になります。

【3つのフェーズ】キャプチャリング・ターゲット・バブリングの決定的な違い

ブラウザがDOMツリー上でイベントを伝達する一連の流れを「イベント伝播（Event Propagation）」と呼びます。このプロセスは単に下から上へ昇るだけでなく、厳密には次の3つのフェーズを経由して処理されています。

第1段階が「キャプチャリングフェーズ（Capturing Phase）」です。ユーザーのアクションが発生すると、イベントはまず最上位のwindowから始まり、DOMツリーの階層を一段ずつ下りながらターゲット要素を目指して下降します。普段はあまり意識されませんが、すべてのイベントはこの親から子への探索からスタートします。

第2段階が「ターゲットフェーズ（Target Phase）」です。イベントが実際にクリックされた対象要素へ到達した瞬間を指し、その要素に直接登録されたハンドラが呼び出されます。

そして第3段階が「バブリングフェーズ（Bubbling Phase）」です。ターゲットに到達したイベントが反転し、今度は子要素から親要素、祖先要素へと上流に向かって駆け上がっていきます。一般的なWeb制作やアプリ開発で目にする「親要素への伝播」は、すべてこの第3フェーズで起きている事象です。

【なぜ起きる？】クリックが親要素へ伝播する原因と現場で起きるトラブル事例

なぜJavaScriptにはこのような親要素・子要素への伝播の仕組みが存在するのでしょうか。その最大の理由は、UIコンポーネントの柔軟な設計とイベント処理の効率化にあります。もしバブリングがなければ、階層構造を持つ複雑なUIにおいて、親要素側で子の状態変化をキャッチすることが極めて困難になります。

しかし、設計を誤ると現場では頻繁にトラブルの火種となります。代表的なのが、モーダルウィンドウの実装です。モーダルの背景（黒い半透明エリア）をクリックしたときにモーダルを閉じる処理を仕掛けた際、中央のモーダルコンテンツ内をクリックしただけで背景の閉じる処理まで連動して発火し、意図せず画面が閉じてしまうバグは非常によく見られます。

また、カード型UIの中に「お気に入り追加ボタン」や「共有リンク」を内包しているケースでも、ボタンを押した瞬間にカード全体の遷移処理が走ってしまうといった事故が後を絶ちません。これらはすべて、子要素のイベントが親要素へと伝播するバブリング現象が原因です。

【コード付き解説】stopPropagationによるバブリング停止とpreventDefaultとの違い

意図しない親要素への伝播を防ぐには、イベントオブジェクトが持つstopPropagation()メソッドを使用してバブリングの停止を実行します。

使い方は極めてシンプルです。イベントリスナーに渡されるイベントオブジェクト（eまたはevent）に対し、処理の途中でメソッドを呼び出します。

const childButton = document.querySelector('.child-btn');
childButton.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('子要素のボタンだけが実行されました');
});

ここで多くの開発者が混同しやすいのが、stopPropagationとpreventDefaultの違いです。stopPropagation()は「DOMツリーを伝わるイベントの伝播（バブリング/キャプチャリング）を途中で遮断する命令」です。一方のpreventDefault()は、「タグのページ遷移や