小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
今天我们来学习与页面加载相关的事件，包括 DOMContentLoaded、load、beforeunload 和 unload。
简介
当我们打开一个页面时，会依次发生以下的事件：
DOMContentLoaded– 浏览器完全加载HTML并构建DOM树。但并没有加载外部样式和图片等外部资源。这时我们可以查找DOM节点或者初始化页面等。load– 浏览器完全加载了 HTML 以及图片和样式等外部资源。
当我们离开一个页面时，会依次发生以下事件：
beforeunload- 在页面被关闭前将触发。我们可以使用此事件来显示确认对话框来防止用户手误离开页面。当我们在填写大量的表单后，可以防止意外点击链接跳转到另一个页面时丢失数据。unload- 当页面被关闭时触发。 可以使用此事件发送分析数据或做一些清理动作。
例子
要处理页面事件，调用document对象上的 addEventListener() 方法：
document.addEventListener('DOMContentLoaded',() => {
// 处理 DOMContentLoaded 事件
});
document.addEventListener('load',() => {
// 处理 load 事件
});
document.addEventListener('beforeunload',() => {
// 处理 beforeunload 事件
});
document.addEventListener('unload',() => {
// 处理 unload 事件
});
以下示例完整说明了如何处理页面加载事件：
<!DOCTYPE html>
<html>
<head>
<title>JS 页面加载事件</title>
</head>
<body>
<script>
addEventListener('DOMContentLoaded', (event) => {
console.log('DOM加载完成.');
});
addEventListener('load', (event) => {
console.log('页面加载完成.');
});
addEventListener('beforeunload', (event) => {
// 显示确认对话框
event.preventDefault();
// Google Chrome 需要设置 returnValue.
event.returnValue = '';
});
addEventListener('unload', (event) => {
console.log('发送统计数据');
});
</script>
</body>
</html>
当第一次页面加载完成时可以看到
当我们要关闭tab时就会显示确认对话框，当确认关闭时就会触发unload事件，把要统计的数据进行上报
总结
今天我们介绍与页面加载相关的事件DOMContentLoaded、load、beforeunload 和 unload。
明天我们接着做详细的学习。
一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新
