Javascriptバブリングとは？仕組みと防ぎ方を徹底図解について詳しく解説いたします。最新の情報をお届けします。

DOMイベントは、発生した瞬間から処理完了に至るまでに3つのフェーズを経由します。ここで重要となるのがキャプチャリングとの違いです。

addEventListener設定方法の第3引数に{ capture: true }を指定しない限り、デフォルト（false）ではすべてのリスナーがバブリングフェーズで実行されます。

【DOMイベント処理の3フェーズ】

1. キャプチャリングフェーズ（Capturing Phase）：最上位のwindowからターゲット要素に向かってイベントが上から下へと降りていく探索段階。
2. ターゲットフェーズ（Target Phase）：実際にクリックされた要素自身に到達し、イベントが処理される段階。
3. バブリングフェーズ（Bubbling Phase）：ターゲット要素から再び親要素、最上位のwindowへと下から上へイベントが浮上・伝播していく段階。