UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【React】キャプチャフェーズのイベント

onClickCaptureを使えば、イベント伝搬のうちのキャプチャリングフェーズで実行される関数を指定できることを知った

ja.react.dev

キャプチャリングフェーズとは、ルート要素からクリックされた要素に向かってイベントが伝播し、それぞれの要素にイベントリスナ・イベントハンドラが登録されているかどうかを調べるフェーズで、登録されていれば実行される

ちなみに、キャプチャリングフェーズの他に、クリックされた要素に到達した時のターゲットフェーズ、クリックされた要素からルートに向かって伝搬するフェーズのバブリングフェーズがある

参考:React・JavaScriptのイベント伝播について今更ながらに理解したのでまとめる

つまり、onClickなどで指定したイベントハンドラを実行する前に実行したいイベントハンドラは、onClickCaptureで指定するのが良い

ちなみに、Reactではv16 -> v17の時に、ドキュメントルート要素からクリックされた要素に向かってイベントが伝播していたものから、ReactDOM.render(<App />, rootNode);のrootNodeに当たる要素からの伝搬に変わったみたい

イベントデリゲーションに関する変更