loadイベントの中でDOMContentLoadedイベントをセットしても動いてくれません

DOMContentLoadedイベントはloadイベントよりも早く動いてくれるので、DOMContentLoadedイベントを使うことで処理のタイミングを早めることができますが、注意があります。
loadイベントの中でDOMContentLoadedイベントをセットしても、動いてくれません。

サンプルコード

let log = (message) =>
  (document.getElementById("log").innerHTML += "<br/>" + message);

window.addEventListener("load", () => {
  log("load");
  window.addEventListener("load", () => log("load -> load"));
  window.addEventListener("DOMContentLoaded", () =>
    log("load -> DOMContentLoaded")
  );
});

window.addEventListener("DOMContentLoaded", () => {
  log("DOMContentLoaded");
  window.addEventListener("load", () => log("DOMContentLoaded -> load"));
  window.addEventListener("DOMContentLoaded", () =>
    log("DOMContentLoaded -> DOMContentLoaded")
  );
});

実行結果

DOMContentLoaded
load
DOMContentLoaded -> load

load -> DOMContentLoaded が出力されていないことがわかりますね。（他にも load -> load と DOMContentLoaded -> DOMContentLoaded も出力されていません）

当たり前のことなのですが、loadイベントが動くときにはDOMContentLoadedイベントはもう終わっているので、このタイミングでセットしても動いてくれないのです。

普通に実装しているとこんな書き方はしないのですが、DOMContentLoadedイベントを利用しているライブラリをloadイベント内で実行しようとする時など、気づかずにこの状態になっているかもしれないので注意です。

codepenでのサンプル

See the Pen DOMContentLoaded in load by mizukoshi akiya (@akiyah) on CodePen.