JavaScript 页面加载事件 - JavaScript 教程

摘要：在本教程中，您将学习与页面加载相关的事件，包括DOMContentLoaded、load、beforeunload和unload。

JavaScript 页面加载事件概述

当您打开页面时，以下事件会按顺序发生

DOMContentLoaded - 浏览器完全加载了 HTML 并完成了 DOM 树的构建。但是，它尚未加载外部资源，如样式表和图像。在此事件中，您可以开始选择 DOM 节点或初始化界面。
load - 浏览器完全加载了 HTML 和外部资源，如图像和样式表。

当您离开页面时，以下事件会按顺序触发

beforeunload - 在页面和资源卸载之前触发。您可以使用此事件显示一个确认对话框，以确认您是否要离开页面。通过这样做，您可以防止在用户正在填写表单并意外单击链接导航到另一个页面时发生数据丢失。
unload - 页面完全卸载时触发。您可以使用此事件发送分析数据或清理资源。

处理 JavaScript 页面加载事件

要处理页面事件，您可以在document对象上调用addEventListener()方法

document.addEventListener('DOMContentLoaded',() => {
    // handle DOMContentLoaded event
});

document.addEventListener('load',() => {
    // handle load event
});

document.addEventListener('beforeunload',() => {
    // handle beforeunload event
});

document.addEventListener('unload',() => {
    // handle unload event
});
Code language: JavaScript (javascript)

以下示例说明了如何处理页面加载事件

<!DOCTYPE html>
<html>
<head>
    <title>JS Page Load Events</title>
</head>

<body>
    <script>
        addEventListener('DOMContentLoaded', (event) => {
            console.log('The DOM is fully loaded.');
        });

        addEventListener('load', (event) => {
            console.log('The page is fully loaded.');
        });

        addEventListener('beforeunload', (event) => {
            // show the confirmation dialog
            event.preventDefault();
            // Google Chrome requires returnValue to be set.
            event.returnValue = '';
        });

        addEventListener('unload', (event) => {
            // send analytic data
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

本教程对您有帮助吗？