フロントエンド開発において避けて通れない「バブリング」とは、HTML文書の階層構造(DOMツリー)において、ある特定の子要素で発生したイベントが、親要素、祖父要素、ひいてはdocumentやwindowに至るまで順番に伝播していく挙動を指します。
多くの初学者が疑問に抱く「なぜ勝手に親要素へ伝播する理由が存在するのか」という点には、Web黎明期からの歴史的経緯と明確な合理性があります。1990年代後半のブラウザ戦争期、Netscapeが提唱した「上から下へ降りてくる方式(キャプチャリング)」と、Internet Explorerが採用した「下から上へ昇っていく方式(バブリング)」の対立を経て、W3Cによって現在の3段階フェーズに統合されました。
このDOMイベントバブリングの真相を端的に言えば、「階層構造を持つUIにおいて、下位要素のアクションを上位コンテナ側で包括的に検知・制御するための必須機能」です。もしバブリングが存在しなければ、リスト内に配置された100個のボタンに対して、開発者は100個すべての要素に個別のイベントリスナーを登録しなければならず、メモリ消費とレンダリング負荷は天文学的に膨れ上がってしまいます。