三十三、页面生命周期: DOMContentLoaded, load, beforeunload, unload
引言
在 Web 开发中,了解页面生命周期是非常重要的。页面生命周期定义了页面从加载到卸载的整个过程,包括各种事件和阶段。在本文中,我们将详细介绍四个关键事件:DOMContentLoaded、load、beforeunload 和 unload。我们将探讨这些事件的属性、API、应用场景,并提供一些代码示例和参考资料。
1. DOMContentLoaded
1) 属性
- type:事件类型,值为 "DOMContentLoaded"
- bubbles:布尔值,指示事件是否会冒泡,默认为 false
- cancelable:布尔值,指示事件是否可以被取消,默认为 false
- target:事件的目标对象,即触发事件的元素
2) API
EventTarget.addEventListener():用于注册事件监听器,以便在 DOMContentLoaded 事件触发时执行相应的处理函数。
3) 应用场景
DOMContentLoaded 事件在页面的 HTML 和 DOM 树加载完成后触发,但在所有外部资源(如图像、样式表、脚本等)加载完成之前。这使得我们可以在 DOM 加载完成后执行一些操作,例如初始化页面元素、注册事件监听器、执行一些初始的 JavaScript 逻辑等。
常见的应用场景包括:
- 初始化页面元素
- 注册事件监听器
- 发送初始的 AJAX 请求
- 执行一些初始的 JavaScript 逻辑
带你读《现代Javascript高级教程》三十三、页面生命周期: DOMContentLoaded, load, beforeunload, unload(2)https://developer.aliyun.com/article/1349477?groupCode=tech_library