关于前端:现代JavaScript高级教程页面生命周期

页面生命周期: DOMContentLoaded, load, beforeunload, unload

引言

在 Web 开发中，理解页面生命周期是十分重要的。页面生命周期定义了页面从加载到卸载的整个过程，包含各种事件和阶段。在本文中，咱们将具体介绍四个要害事件：DOMContentLoaded、load、beforeunload 和 unload。咱们将探讨这些事件的属性、API、利用场景，并提供一些代码示例和参考资料。

1. DOMContentLoaded

1.1 属性

• type：事件类型，值为 "DOMContentLoaded"
• bubbles：布尔值，批示事件是否会冒泡，默认为 false
• cancelable：布尔值，批示事件是否能够被勾销，默认为 false
• target：事件的指标对象，即触发事件的元素

1.2 API

• EventTarget.addEventListener()：用于注册事件监听器，以便在 DOMContentLoaded 事件触发时执行相应的处理函数。

1.3 利用场景

DOMContentLoaded 事件在页面的 HTML 和 DOM 树加载实现后触发，但在所有内部资源（如图像、样式表、脚本等）加载实现之前。这使得咱们能够在 DOM 加载实现后执行一些操作，例如初始化页面元素、注册事件监听器、执行一些初始的 JavaScript 逻辑等。

常见的利用场景包含：

• 初始化页面元素
• 注册事件监听器
• 发送初始的 AJAX 申请
• 执行一些初始的 JavaScript 逻辑

1.4 示例代码

document.addEventListener('DOMContentLoaded', function() {
  // DOMContentLoaded 事件触发后执行的逻辑
  console.log('DOMContentLoaded event triggered');
});

在下面的示例中，咱们应用 addEventListener 办法注册了一个 DOMContentLoaded 事件监听器。当 DOMContentLoaded 事件触发时，控制台将输入 'DOMContentLoaded event triggered'。

2. load

2.1 属性

• type：事件类型，值为 "load"
• bubbles：布尔值，批示事件是否会冒泡，默认为 false
• cancelable：布尔值，批示事件是否能够被勾销，默认为 false
• target：事件的指标对象，即触发事件的元素

2.2 API

• EventTarget.addEventListener()：用于注册事件监听器，以便在 load 事件触发时执行相应的处理函数。

2.3 利用场景

load 事件在整个页面及其所有内部资源（如图像、样式表、脚本等）加载实现后触发。这意味着页面的所有内容曾经可用，并且能够执行与页面渲染和交互相干的操作。

常见的利用场景包含：

• 执行一些须要页面齐全加载后能力进行的操作
• 初始化和配置第三方库和插件
• 启动动画或其余视觉效果

2.4 示例代码

window.addEventListener('load', function() {
  // load 事件触发后执行的逻辑
  console.log('load event triggered');
});

在下面的示例中，咱们应用 addEventListener 办法注册了一个 load 事件监听器。当 load 事件触发时，控制台将输入 'load event triggered'。

3. beforeunload

3.1 属性

• type：事件类型，值为 "beforeunload"
• bubbles：布尔值，批示事件是否会冒泡，默认为 false
• cancelable：布尔值，批示事件是否能够被勾销，默认为 true
• target：事件的指标对象，即触发事件的元素

3.2 API

• EventTarget.addEventListener()：用于注册事件监听器，以便在 beforeunload 事件触发时执行相应的处理函数。
• Event.preventDefault()：用于阻止默认的 beforeunload 行为，例如显示浏览器默认的退出提示框。

3.3 利用场景

beforeunload 事件在页面行将被卸载（敞开、刷新、导航到其余页面等）之前触发。它通常用于询问用户是否确定来到以后页面，并能够在事件处理函数中执行一些清理操作。

常见的利用场景包含：

• 提醒用户保留未保留的数据或来到前的确认提醒
• 执行清理操作，如勾销未实现的 AJAX 申请、开释资源等

3.4 示例代码

window.addEventListener('beforeunload', function(event) {
  // beforeunload 事件触发时执行的逻辑
  // 能够在这里提醒用户保留未保留的数据或来到前的确认提醒
  event.preventDefault(); // 阻止默认的 beforeunload 行为
  event.returnValue = ''; // Chrome 须要设置 returnValue 属性
});

在下面的示例中，咱们应用 addEventListener 办法注册了一个 beforeunload 事件监听器。在事件处理函数中，咱们能够执行一些提醒用户保留数据或来到前的确认逻辑。通过调用 preventDefault 办法，咱们阻止了默认的 beforeunload 行为，并通过设置 returnValue 属性（在某些浏览器中须要设置）为空字符串来确保提示框的显示。

4. unload

4.1 属性

• type：事件类型，值为 "unload"
• bubbles：布尔值，批示事件是否会冒泡，默认为 false
• cancelable：布尔值，批示事件是否能够被勾销，默认为 false
• target：事件的指标对象，即触发事件的元素

4.2 API

• EventTarget.addEventListener()：用于注册事件监听器，以便在 unload 事件触发时执行相应的处理函数。

4.3 利用场景

unload 事件在页面行将被卸载（敞开、刷新、导航到其余页面等）时触发。它能够用于执行一些清理操作，如开释资源、勾销未实现的申请等。

常见的利用场景包含：

• 开释页面所应用的资源，如革除定时器、勾销事件监听器等
• 发送最初的统计数据或日志

4.4 示例代码

window.addEventListener('unload', function() {
  // unload 事件触发后执行的逻辑
  console.log('unload event triggered');
});

在下面的示例中，咱们应用 addEventListener 办法注册了一个 unload 事件监听器。当 unload 事件触发时，控制台将输入 'unload event triggered'。

5. 总结

页面生命周期的四个重要事件：DOMContentLoaded、load、beforeunload 和 unload，定义了页面从加载到卸载的不同阶段。这些事件能够帮忙咱们在适合的机会执行相干的操作，提供更好的用户体验和数据处理。

• DOMContentLoaded 事件在 HTML 和 DOM 树加载实现后触发，实用于执行与 DOM 相干的初始化操作。
• load 事件在整个页面及其内部资源加载实现后触发，实用于执行与页面渲染和交互相干的操作。
• beforeunload 事件在页面行将被卸载之前触发，实用于询问用户是否确定来到页面或执行一些清理操作。
• unload 事件在页面被卸载后触发，实用于执行最初的清理操作。

理解页面生命周期事件及其利用场景对于优化页面加载和交互体验十分重要。通过正当利用这些事件，咱们能够在适当的机会执行相干的逻辑，提供更好的用户交互和数据处理。

6. 参考资料

• MDN Web Docs – DOMContentLoaded
• MDN Web Docs – load
• MDN Web Docs – beforeunload
• MDN Web Docs – unload