JavaScriptには「バブリング」という概念があります。

イベントを登録した際に、意図していない要素まで反応してしまうことがあるため、バブリングの仕組みを理解しておくことが重要です。

この記事では、バブリングの概要と、その影響を防ぐ方法について解説します。

バブリングとは

JavaScriptで登録したイベントは、その要素だけで処理されるわけではありません。

イベントが発生すると、
子要素 → 親要素 → さらに上の親要素
という順番でイベントが伝播していきます。

この現象を「バブリング（Bubbling）」と呼びます。

例えば

クリックすると開閉するアコーディオンの中に、さらにクリック可能な要素があるとします。

• タイトルバーをクリックするとアコーディオンが開閉される
• ハートアイコンをクリックすると色が変わる

このような挙動を実装したいとします。

それぞれの要素に単純にclickイベントを登録すると、ハートは色を変えたいだけなのに、アコーディオンまで開閉されてしまいます。

これは、子要素（ハートアイコン）で発生したクリックイベントが、親要素（アコーディオン）にも伝播しているためです。

バブリングの影響を止めるには

stopPropagation()を使ってバブリングを止めることができます。

これにより、
その要素でイベント処理を完結させ、親要素へは伝播しなくなります。

まとめ

• バブリングとは、イベントが親要素へ伝播する仕組み
• 子要素のイベントが原因で、親要素が反応することがある
• stopPropagation() を使うことで伝播を防げる