関数を定義する事による、発火タイミングの差異について。先に定義すると、定義しない時よりもはやく実行される。

Question

実行したい関数を先に定義することは、関数の実行タイミングにどのような影響を及ぼしますか？

とある画像をロードした後に実行したい関数があり、以下のように記述していたのですが、

document.getElementById("とある画像").addEventListener("load", 実行したい関数);

”実行したい関数”を先に定義することによって、画像ロード後の処理の順番に違いがあることに気がつきました。
具体的には以下の違いです。（実行の順番をconsole.logで出しております。リンク先をご確認いただける方はそちらも合わせてご確認いただけますと幸いです。）

---

■addEventListenerに直接関数を記述した場合（https://vyb1j.csb.app/without_const.html）

    <script>
      console.log("script start");
      window.addEventListener("DOMContentLoaded", function () {

        console.log("DOM loaeded");

        document.getElementById("tracker").addEventListener("load", function () {
            console.log("img loaded");
            console.log(performance.now());
        });
      });
    </script>

▶︎実行順番
画像が持つonloadの関数　が先
実行したい関数　が後

---

■先に実行したい関数を定義して、addEventListenerには定義した変数を記述
（https://vyb1j.csb.app/const_first.html）

<script>
      console.log("script start");
      const afterLoad = function () {
        console.log("img loaded");
        console.log(performance.now());
      };
      window.addEventListener("DOMContentLoaded", function () {
        console.log("DOM loaeded");
        document.getElementById("tracker").addEventListener("load", afterLoad());
      });
</script>

▶︎実行順番
実行したい関数　が先
画像が持つonloadの関数　が後

---

上記の差が出たのですが、何故ですか？
・先に定義することによって実行速度が速くなった？
・先に定義することによって実行の優先順位が変わった？
ご教示いただけますと大変大変ありがたいです。何卒よろしくお願いいたします。

---

追記
function(){}　で挟むかどうかでも実行順番が想定外になりました。無名関数を設定すると発火が遅くなる...？

document.getElementById('tracker').addEventListener("load", function () { console.log('先に書いているのにこっちが後') });
document.getElementById('tracker').addEventListener("load", console.log('後に書いているのにこっちが先'))

Answer 1

■先に実行したい関数を定義して、addEventListenerには定義した変数を記述

「先に定義したこと」が理由ではなく、「コールバックとして関数をそのまま指定する想定の箇所で、関数を実行している」ことが原因です。

<script>
      console.log("script start");
      const afterLoad = function () {
        console.log("img loaded");
        console.log(performance.now());
      };
      window.addEventListener("DOMContentLoaded", function () {
        console.log("DOM loaeded");
        // ここでafterLoad()としているので、関数をこの時点で実行しているだけ
        document.getElementById("tracker").addEventListener("load", afterLoad());
      });
</script>

イベントリスナーとしてロード時に実行させたいなら、以下のようにする必要があります。

-document.getElementById("tracker").addEventListener("load", afterLoad());
+document.getElementById("tracker").addEventListener("load", afterLoad);