capture listener は外側の祖先から target に向かって実行されます。target では capture listener が bubble listener より先に実行され、どちらも target フェーズとして報告されます。bubbles が true なら、その後 target から祖先へ向かって bubble listener が実行されます。同じノードにある同種の listener 同士は登録順に実行されます。

まず event.bubbles を確認してください。イベントの種類によっては、もともと bubble しません。true の場合は、親要素へ届く前に stopPropagation または stopImmediatePropagation が呼ばれていないか、親要素が実際に composedPath() 上にあるか、Shadow DOM やフレームワークの境界によって見える経路が変わっていないかを確認します。trace には経路、最後の観測、記録された停止呼び出しが表示されるため、これらを切り分けられます。

event.target は listener から見えるイベントの発生元で、通常は伝播中も同じです。event.currentTarget は現在 listener が実行されているノードなので、観測点ごとに変わります。イベント委譲では、target でクリックされた子孫を識別し、currentTarget で handler を持つ要素を識別します。

常にブロックするわけではありません。同じ currentTarget 上で、同じ capture または bubble の呼び出し中にあるほかの listener は引き続き実行されます。ただし target の capture listener が stopPropagation を呼ぶと、後続の target の bubble 呼び出しはスキップされます。stopImmediatePropagation は後続の伝播に加えて、同じ呼び出し中に残っている listener も停止します。probe は実際に呼ばれたメソッドを記録するため、これらを混同せずに済みます。

イベント種別を選び、一度だけ動く probe をコピーして、問題が起きるページの DevTools で実行します。イベントを1回再現したら、生成された JSON trace をこのツールに貼り付けます。probe は取得後に listener を削除して一時的に変更したメソッドを元に戻し、その1イベント以外は記録せず、trace をネットワーク送信しません。

イベント伝播は、1つの DOM イベントがどのノードを進み、その経路上の capture、target、bubble listener がどのように実行されるかを表します。イベントループは、コールスタック、microtask、macrotask を調整して JavaScript の処理がいつ実行されるかを決めます。click はタスクとしてイベントループに入り、そのイベントの dispatch が始まると、イベント伝播が内部の listener の順序を決めます。