”バブリング” を知って制御する #6
📢 このシリーズについて
このシリーズは、React公式ドキュメント（ https://ja.react.dev/ ）を(できるだけ)全て読み、学んだことやコード例、自分なりの補足をまとめていくチャレンジの記録です。
目的
- Reactの基礎〜応用を公式の正しい情報で体系的に理解する
- 自分の言葉でアウトプットして知識を定着させる
このシリーズでは、ただ内容をなぞるのではなく、**「自分がReactを使っていても気づかなかった事実や落とし穴」**を重点的にまとめます。
読んだときに「へぇ、そうなんだ！」となったポイントは必ず記録します！
目次 - 本記事で取り扱う内容
- バブリングとは
- バブリングの止め方
🗂 基本情報
- タイトル:イベントへの応答
- URL: https://ja.react.dev/learn/responding-to-events
- カテゴリ: Learn
- 難易度: ★
- 読了日: 2025-08-18
📌 内容
本記事ではイベントハンドラの バブリング.。o○ について、学んだことをアウトプットしたい。
バブリングとは
簡潔に言うと、イベントハンドラが発火した際、そのコンポーネントから親要素、そこからまた親要素…とイベントが上へあがっていくことをいう。
「イベントが上へあがる」とは、子コンポーネントでonClickやonKeydownなどのイベントが発火したときに、親要素がonClickやonKeydownを持っていた場合、つられて発火することを指す。
この「イベントがあがる」現象は、<html>要素を超えて、documentからwindowまで到達する。
なんでもかんでも一緒に発火されちゃあ制御できんがな！
って思ったけど以下の2つの観点で問題なさそう。
-
同じ要素しか伝播しない。
→ onClickならonClick、onKeydownならonKeydownしか発火しない。
なお、Reactでは “ onScroll “ 以外すべてのイベントが伝播する。
-
そもそも親要素はだいたいラッパ要素。
→ button の中にbuttonは置けない。親はdivとかformだ。
だけどdivにonClick付けなくない？
バブリングの止め方
バブリングの停止を明示的に記述することができる。
<button onClick={e => {
e.stopPropagation(); //この記述が停止処理
onClick();
}}/>
イベントハンドラは “ イベントオブジェクト “ のみを引数として受け取る。これは慣習的にイベントの頭文字をとって “ e “ と書かれる。
このイベントオブジェクトのメソッドであるstopPropagationを用いることでバブリングを停止させることができる。
🚀 宣伝コーナー
個人開発もやっています🍃
ぜひ一度触ってみてください！
1. CAN I DO THIS
📜概要
🌟 「この問題、私に解ける？」がすぐ分かる！ 🌟
CAN I DO THIS は、問題（文章／画像）をポンっと入れるだけで、「解くのに必要な前提知識」を瞬時に可視化するツールです💡
🛡 前提知識がないまま無理に挑んで、時間と体力をムダに消耗…
そんな経験、もうしなくてOK。
必要な知識が足りているか、すぐ判断できます！
✨ 主な機能
- 問題を貼るだけ → 必要知識リスト＋学習ルート自動生成
- 前提 → 派生が一目で分かる依存関係グラフ
- 登録不要＆無料（広告視聴で利用可能）
Discussion