在前端开发中，DOMContentLoaded 是一个很重要的事件。这个事件会在 HTML 文档解析完成后，所有的 DOM 对象都被构建完成之后被触发。通常情况下，我们需要在这个事件触发后执行一些 JavaScript 代码，以确保页面已经完全加载。
为什么需要检测 DOMContentLoaded
在网速较慢或者网络状况不佳的情况下，HTML 文档的加载可能会比较缓慢。如果我们在文档还没有完全加载完成时就执行了 JavaScript 代码，那么可能会导致一些问题，例如无法获取正确的元素尺寸、无法正确计算元素位置等。因此，我们通常需要在 DOMContentLoaded 事件触发后再执行 JavaScript 代码，以确保页面已经完全加载。
如何检测 DOMContentLoaded
在 JavaScript 中，我们可以使用如下方式来检测 DOMContentLoaded 是否已经被触发：
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
// 在 DOMContentLoaded 后执行的 JavaScript 代码
});
} else {
// 文档已经完成解析，直接执行 JavaScript 代码
}上面的代码首先检查 document.readyState 属性的值是否为 "loading"，如果是，说明文档还没有完成解析，此时我们需要添加 DOMContentLoaded 事件监听器，在文档解析完成后执行 JavaScript 代码。如果 document.readyState 的值不是 "loading"，说明文档已经解析完成，此时我们可以直接执行 JavaScript 代码。
示例代码
下面是一个简单的示例，用于演示如何检测 DOMContentLoaded 是否被触发：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------- --------------
-------
------
---------- -----------
--------
-- -------------------- --- ---------- -
--------------------------------------------- ---------- -
---------------- ------- ---------
---
- ---- -
---------------- ------- ------- ---------
-
---------
-------
-------在上面的示例代码中，我们首先判断 document.readyState 的值是否为 "loading"，如果是，说明文档还没有完成解析，此时我们添加 DOMContentLoaded 事件监听器，在 DOMContentLoaded 后输出一条消息。如果 document.readyState 的值不是 "loading"，说明文档已经解析完成，此时我们直接输出一条消息。
结论
在前端开发中，DOMContentLoaded 是一个非常重要的事件。通过检测 DOMContentLoaded 是否已经被触发，我们可以确保页面已经完全加载，避免出现一些奇怪的问题。在 JavaScript 中，我们可以使用 document.readyState 属性来检测 DOMContentLoaded 是否已经被触发，然后执行相应的 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30173