JavaScript DOMContentLoaded 事件

摘要：在本教程中，您将了解 JavaScript DOMContentLoaded 事件。

JavaScript DOMContentLoaded 事件简介

DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后触发，无需等待样式表、图像、框架和异步脚本 <script async src="..."> 完成加载。

以下是 DOMContentLoaded 事件的关键要点

DOMContentLoaded 事件在 HTML 文档完全解析后触发。
它不会等待外部资源（如样式表、图像、框架和异步脚本 <script async src="...">）完成加载。
所有延迟脚本 <script defer src="..."> 和模块 <script type="module"> 已下载并执行。
DOMContentLoaded 事件不可取消。

要向 DOMContentLoaded 事件添加事件处理程序，您可以使用 addEventListener() 方法，如下所示

document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed.");
});Code language: JavaScript (javascript)

在此示例中，一旦 DOM 完全加载，代码将在控制台中显示消息“DOM 完全加载并解析”。

JavaScript DOMContentLoaded 事件示例

在实践中，当您将 JavaScript 放置在页面的 head 中但引用 body 中的元素时，您可以监听 DOMContentLoaded 事件，例如

<!DOCTYPE html>
<html>

<head>
    <title>JS DOMContentLoaded Event</title>
    <script>
        let btn = document.getElementById('btn');
        btn.addEventListener('click', (e) => {
            // handle the click event
            console.log('clicked');
        });
    </script>
</head>

<body>
    <button id="btn">Click Me!</button>
</body>

</html>
Code language: HTML, XML (xml)

此示例将导致错误，因为当脚本标签运行时，按钮尚未加载。

要解决此问题，您可以在 DOMContentLoaded 事件处理程序中放置上述代码，如下所示

<!DOCTYPE html>
<html>

<head>
    <title>JS DOMContentLoaded Event</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let btn = document.getElementById('btn');
            btn.addEventListener('click', () => {
                // handle the click event
                console.log('clicked');
            });
        });
    </script>
</head>

<body>
    <button id="btn">Click Me!</button>
</body>

</html>
Code language: HTML, XML (xml)

当您将 JavaScript 放置在页眉中时，会导致瓶颈和渲染延迟。因此，最好将脚本移到 </body> 标签之前。在这种情况下，您不需要将代码放在 DOMContentLoaded 事件中

<!DOCTYPE html>
<html>

    <head>
        <title>JS DOMContentLoaded Event</title>
    </head>

    <body>
        <button id="btn">Click Me!</button>
        <script>
            let btn = document.getElementById('btn');

            // add an event listener
            btn.addEventListener('click', (e) => {
                console.log('clicked');
            });
        </script>
    </body>

</html>Code language: HTML, XML (xml)

readyState

HTML 文档有三种加载状态

"loading" – 文档正在加载。
"interactive" – 文档已完全读取。
"complete" – 文档已完全读取，所有资源（如图像）已加载。

document.readState 属性存储当前加载状态。

如果文档已加载，并且您注册了 DOMContentLoaded 事件处理程序，则事件处理程序将永远不会执行。

要正确设置处理程序或在文档准备就绪时立即执行事件处理程序，您可以检查 readyState 属性，如下所示

<!DOCTYPE html>
<html>
    <head>
        <title>JS DOMContentLoaded Event</title>
        <script>
            function handleReady() {
                console.log('DOM ready');
            }

            if (document.readyState === 'loading') {
                console.log('The document is loading...');
                document.addEventListener('DOMContentLoaded', handleReady);
            } else {
                console.log('The document has been loaded.');
                handleReady();
            }
        </script>
    </head>
    <body>
    </body>
</html>Code language: HTML, XML (xml)

总结

DOMContentLoaded 事件在 DOM 内容加载时触发，无需等待外部资源（如图像样式表和框架）完成加载。
仅当您将 JavaScript 代码放置在 head 中并引用 body 中的元素时，才处理 DOMContentLoaded 事件。
readyState 存储当前文档加载状态，包括 loading、interactive 和 complete。

测验

本教程是否有帮助？