”バブリング” を知って制御する #6

Last updated at 2025-08-21Posted at 2025-08-20

📢 このシリーズについて

このシリーズは、React公式ドキュメント（ https://ja.react.dev/ ）を(できるだけ)全て読み、学んだことやコード例、自分なりの補足をまとめていくチャレンジの記録です。

このシリーズでは、ただ内容をなぞるのではなく、**「自分がReactを使っていても気づかなかった事実や落とし穴」**を重点的にまとめます。

読んだときに「へぇ、そうなんだ！」となったポイントは必ず記録します！

本記事ではイベントハンドラのバブリング.。o○ について、学んだことをアウトプットしたい。

簡潔に言うと、イベントハンドラが発火した際、そのコンポーネントから親要素、そこからまた親要素…とイベントが上へあがっていくことをいう。

「イベントが上へあがる」とは、子コンポーネントでonClickやonKeydownなどのイベントが発火したときに、親要素がonClickやonKeydownを持っていた場合、つられて発火することを指す。

この「イベントがあがる」現象は、要素を超えて、documentからwindowまで到達する。

なんでもかんでも一緒に発火されちゃあ制御できんがな！

って思ったけど以下の2つの観点で問題なさそう。

同じ要素しか伝播しない。

→ onClickならonClick、onKeydownならonKeydownしか発火しない。

なお、Reactでは “ onScroll “ 以外すべてのイベントが伝播する。
そもそも親要素はだいたいラッパ要素。

→ button の中にbuttonは置けない。親はdivとかformだ。
```
  だけどdivにonClick付けなくない？
```

バブリングの停止を明示的に記述することができる。

<button onClick={e => {
      e.stopPropagation();  //この記述が停止処理
      onClick();
}}/>

イベントハンドラは “ イベントオブジェクト “ のみを引数として受け取る。これは慣習的にイベントの頭文字をとって “ e “ と書かれる。

このイベントオブジェクトのメソッドであるstopPropagationを用いることでバブリングを停止させることができる。

個人開発もやっています🍃

ぜひ一度触ってみてください！

🌟 「この問題、私に解ける？」がすぐ分かる！ 🌟

CAN I DO THIS は、問題（文章／画像）をポンっと入れるだけで、「解くのに必要な前提知識」を瞬時に可視化するツールです💡

🛡 前提知識がないまま無理に挑んで、時間と体力をムダに消耗…

そんな経験、もうしなくてOK。

必要な知識が足りているか、すぐ判断できます！