窗口 DOMContentLoaded 与文档 DOMContentLoaded

Question

“DOM 就绪”的现代替代是事件DOMContentLoaded。

您可以在 2 个全局对象上监听它：

• window=> https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
• document=> https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

现在我知道这个事件的原始目标是document根据上面的 MDN 链接，还可以“在 Window 界面上侦听此事件以在捕获或冒泡阶段处理它”。

window当捕获或冒泡阶段捕获事件更合适甚至需要捕获事件时，是否存在特定优势或特殊情况？

Answer 1

一段时间后我又回到了这个话题，它开始变得有意义了：

1. 侦听器在事件之后Window发生-因为它从文档中冒泡Document

2. 所以如果你运行（jsfiddle）：

   window.addEventListener("DOMContentLoaded", (event) => {
     alert("Catching event on window - target: " + event.target.constructor.name);
   });
   

   ...警报中的输出将是：

   捕获窗口上的事件 - 目标：HTMLDocument

   这证明它来自文档，因为window.constructor.name是"Window"

这甚至在《生活标准》中也有描述，其中写道（截至2023年6月20日）

13.2.7 结束

一旦用户代理停止解析文档，用户代理必须运行以下步骤：
1...
6. 在给定文档的相关全局对象的情况下，在 DOM 操作任务源上对全局任务进行排队，以运行以下子步骤：

1. 将文档的加载计时信息的 DOM 内容加载事件开始时间设置为给定文档的相关全局对象的当前高分辨率时间。
2. 在Document对象上触发名为DOMContentLoaded的事件，并将其bubbles属性初始化为 true。
3. ...

还有文档的部分：Events

• 事件：DOMContentLoaded
• 接口：事件
• 有趣的目标：文档
• 描述：解析器完成后在文档中触发

没有具体DOMContentLoaded提及window:-)

所以回答主要问题

不同之处在于您希望执行处理程序的时间。

所有document DOMContentLoaded侦听器执行完毕后

=> 使用window.addEventListener("DOMContentLoaded", ...

在所有其他正在监听的处理程序DOMContentLoaded中Document

=> 使用document.addEventListener("DOMContentLoaded", ...

旁注：MDNload在“文档：DOMContentLoaded 事件”页面上提到了事件 - 这是断章取义的，它们的意思是load在以下位置使用事件监听器Window-Document没有load事件，因为它不是Element...