通常、イベントハンドラはバブリングフェーズ中に実行されます。この例で<input>に何かを入力するとどうなるか注意してください - イベントがターゲットからドキュメントまで「バブリング」するため、内部ハンドラが最初に実行され、その後外部ハンドラが実行されます。

場合によっては、代わりにキャプチャフェーズ中にハンドラを実行したいことがあります。イベント名の最後にcaptureを追加します。

<div onkeydowncapture={(e) => alert(`<div> ${e.key}`)} role="presentation">
	<input onkeydowncapture={(e) => alert(`<input> ${e.key}`)} />
</div>

これで、相対的な順序が逆になります。特定のイベントに対してキャプチャリングハンドラと非キャプチャリングハンドラの両方が存在する場合、キャプチャリングハンドラが最初に実行されます。