JS DOM编程复习笔记 - DOMContentLoaded、load、beforeunload 和 unload（十四）

今天我们来学习与页面加载相关的事件，包括 DOMContentLoaded、load、beforeunload 和 unload。

简介

当我们打开一个页面时，会依次发生以下的事件：

• DOMContentLoaded – 浏览器完全加载HTML并构建DOM树。但并没有加载外部样式和图片等外部资源。这时我们可以查找DOM节点或者初始化页面等。
• load – 浏览器完全加载了 HTML 以及图片和样式等外部资源。

当我们离开一个页面时，会依次发生以下事件：

• beforeunload - 在页面被关闭前将触发。我们可以使用此事件来显示确认对话框来防止用户手误离开页面。当我们在填写大量的表单后，可以防止意外点击链接跳转到另一个页面时丢失数据。
• unload - 当页面被关闭时触发。 可以使用此事件发送分析数据或做一些清理动作。

例子

要处理页面事件，调用document对象上的 addEventListener() 方法：

document.addEventListener('DOMContentLoaded',() => {
   
  // 处理 DOMContentLoaded 事件
});

document.addEventListener('load',() => {
   
  // 处理 load 事件