バブリングとは？意図せぬイベント発火の真相と防止策を徹底解説

バブリングとは？意図せぬイベント発火の真相と防止策を徹底解説に関する詳細情報を分かりやすくまとめました。最新データをご覧ください。

ブラウザがHTML文書を読み込むと、タグの入れ子関係に従ってDOMツリー構造（Document Object Model）が構築されます。たとえば、<div>の中に<p>があり、その中に<button>が配置されている状態をイメージしてください。ユーザーが最深部にあるボタンをクリックした際、ブラウザ内部では単にそのボタン単体で処理が完結するわけではありません。

W3CおよびWHATWGが策定した公式標準仕様によると、DOMイベントは以下の3つのフェーズを経て伝播します。この一連の流れを総称して「イベント伝播」と呼びます。

1. キャプチャリングフェーズ：最上位のWindowやDocumentから開始され、DOMツリーを親から子へと潜りながらクリックされたターゲット要素を目指して下降していく段階。
2. ターゲットフェーズ：イベントが実際に発生した最深部の要素（ターゲット要素）に到達し、そこに直接紐付けられたイベントが呼び出される段階。
3. バブリングフェーズ：ターゲット要素から反転し、水中の泡（Bubble）が水面に向かって浮かび上がるように、親要素、祖父要素へとDOMツリーを駆け上がっていく段階。

これがイベントバブリングの仕組みです。標準仕様において、addEventListenerで登録された通常のイベントリスナーは、特別な指定をしない限りすべて第3段階の「バブリングフェーズ」で動作します。つまり、最下層のボタンをクリックしただけでも、その上位に構える親要素、祖父要素のイベントリスナー（親要素）が次々と連鎖反応を起こすように設計されているのです。