通常、イベントハンドラーは バブリング フェーズで実行されます。この例で <input> に何かを入力すると何が起こるかに注目してください。イベントが target から document まで「バブル」すると、最初に内部ハンドラーが実行され、その後に外部ハンドラーが実行されます。

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

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

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