DOMContentLoaded事件不触发，模块脚本中仅外部代码运行求助

我编写了如下代码，但DOMContentLoaded事件内的代码完全没有生效，仅第一行console.log("Script loaded")能打印：

index.html #

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript  </title>

    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="App"></div>

    <script src="./index.mjs" type="module"></script>
  </body>
</html>

index.mjs #

console.log("Script loaded");   //仅该行能打印

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM fully loaded and parsed");  //事件内无输出
});

• 原因：带有type="module"的脚本属于ES模块脚本，浏览器对这类脚本的默认处理是延迟执行——会等到整个DOM树解析完成后才运行脚本。当你的模块脚本执行时，DOMContentLoaded事件早已经触发过了，所以后续添加的监听函数不会被调用。

• 解决方案1：直接移除事件监听
  既然模块脚本本身会等待DOM解析完成再执行，直接把需要在DOM就绪后运行的代码写在模块里即可，不需要额外监听事件：

  console.log("Script loaded");
  // 直接执行DOM就绪后需要运行的代码
  console.log("DOM fully loaded and parsed");
  

• 解决方案2：兼容处理（保留事件监听）
  如果一定要保留事件监听的写法，可以先判断当前DOM的加载状态，如果已经加载完成就直接执行回调，否则再监听事件：

  console.log("Script loaded");
  
  function handleDomReady() {
    console.log("DOM fully loaded and parsed");
  }
  
  // 判断DOM是否还在加载中
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", handleDomReady);
  } else {
    // DOM已经加载完成，直接执行回调
    handleDomReady();
  }
  

内容的提问来源于stack exchange，提问作者Ekas Singh