# イベントのバブリングは DOM ツリーではなく React ツリーに従う ## イベントのバブリングとは ブラウザ上でイベントが発生したとき、キャプチャリングとバブリングの 2 つの段階に分けて動作します。キャプチャリングではまず最上位の親要素（通常 ``）にイベントハンドラが登録されているか調べて、あればそれを実行します。次に内側の要素に写って同様のことを繰り返し、実際にイベントが発生した要素が到達するまで繰り返します。バブリングの段階ではキャプチャリングの逆のことが起こります。実際にイベントが発生した要素にイベントハンドラがあるか調べ、あればそれを実行し、これを最上位の親要素に到達するまで繰り返します。 ![eventflow](//images.ctfassets.net/in6v9lxmm5c8/7CpmmYB78ZdY5a0FCymdgu/e0f32a1e69458862ec48d22022629699/eventflow.svg) https://www.w3.org/TR/DOM-Level-3-Events/#event-flow キャプチャリングは実際のコードの中ではほとんど使われません。`onclick` や `addEventListener` で追加されたイベントハンドラはキャプチャリングについて何も知らないからです。キャプチャリングフェーズでイベントをキャッチするには `addEventListener` の第 3 引数に `true` を渡す必要があります。 よく問題に挙げられるのはバブリングフェーズです。具体例を見てみましょう。 上記の例では `
` の子要素に ` ``` このことからイベントのバブリングは発生しないように思えます。しかし、実際には `