addEventListenerの処理の順番について

Question

前提・実現したいこと

以下サンプルコードのように、「特定の要素」と「document」に対してaddEventListener を設定する場合、処理の順番はどのように決まるのでしょうか？

「document」のほうを最初に実行したいのですが、「document」を「特定の要素」よりも先に記述しても、結果は変わりませんでした。

どうすれば、「document」のほうを最初に実行できますか？

該当のソースコード

    document.querySelector('#hoge').addEventListener('click', (_ev) => {
      console.log("次にしたい処理")
    })
    document.addEventListener('click', (_ev) => {
      console.log("最初にしたい処理")
    })
    // "次にしたい処理" → "最初にしたい処理" で出力される

    // 上下逆に書いても出力順は変わらなかった
    document.addEventListener('click', (_ev) => {
      console.log("最初にしたい処理")
    })
    document.querySelector('#hoge').addEventListener('click', (_ev) => {
      console.log("次にしたい処理")
    })
    // "次にしたい処理" → "最初にしたい処理" で出力される

Answer 1

普通にセットしたイベントはバブリングを起こしますので、「クリックされた要素のclickイベント」→「その親要素のclickイベント」→…→「documentのclickイベント」という順で進んでいきます。

どうしてもdocumentのイベントを先に動かしたいなら、キャプチャフェーズを使う形にする（document.addEventListener(イベント名, 関数, true)のように第3引数にtrueを指定する）ことで実現可能です。

Comments

[true_colors_20]

とてもわかり易く説明いただきありがとうございます。理解しました。

Answer 2

3つ目の引数をtrueにするとどうでしょうか？

要素上でイベントが起きると、最初にその上のハンドラが実行され、次にその親のハンドラが実行され、他の祖先に到達するまでそれらが行われます。
...

<td> をクリックした場合、イベントは最初に祖先のチェーンを通って要素へ下りていき(キャプチャリング)、ターゲットに到達した後、ハンドラを呼び出しながら上に行き(バブル)ます。 ... キャプチャリングフェーズでイベントをキャッチするには、addEventListener の３つ目の引数を true にする必要があります。

バブリング と キャプチャリング

Comments

[true_colors_20]

参考文献までありがとうございます。理解できました。