今天我们来学习与页面加载相关的事件,包括 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
。
明天我们接着做详细的学习。
一起学习更多前端知识,微信搜索【小帅的编程笔记】,每天更新