云南省建设网站,做地方网站如何盈利,靖江网站设计,wordpress教育培训模板#x1f3ac; 江城开朗的豌豆#xff1a;个人主页 #x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 #x1f4dd; 个人网站 :《 江城开朗的豌豆#x1fadb; 》 ⛺️ 生活的理想#xff0c;就是为了理想的生活 ! 目录 引言 1. DOMContentLoaded 1.1 属性 1.2 A… 江城开朗的豌豆个人主页 个人专栏 :《 VUE 》 《 javaScript 》 个人网站 :《 江城开朗的豌豆 》  ⛺️ 生活的理想就是为了理想的生活 ! 目录 引言 1. DOMContentLoaded 1.1 属性 1.2 API 1.3 应用场景 1.4 示例代码 2. load 2.1 属性 2.2 API 2.3 应用场景 3. beforeunload 3.1 属性 3.2 API 3.3 应用场景 3.4 示例代码 4. unload 4.1 属性 4.2 API 4.3 应用场景 4.4 示例代码 5. 总结 引言 在 Web 开发中了解页面生命周期是非常重要的。页面生命周期定义了页面从加载到卸载的整个过程包括各种事件和阶段。在本文中我们将详细介绍四个关键事件DOMContentLoaded、load、beforeunload 和 unload。我们将探讨这些事件的属性、API、应用场景并提供一些代码示例和参考资料。 1. DOMContentLoaded 1.1 属性 type事件类型值为 DOMContentLoadedbubbles布尔值指示事件是否会冒泡默认为 falsecancelable布尔值指示事件是否可以被取消默认为 falsetarget事件的目标对象即触发事件的元素 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事件类型值为 loadbubbles布尔值指示事件是否会冒泡默认为 falsecancelable布尔值指示事件是否可以被取消默认为 falsetarget事件的目标对象即触发事件的元素 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事件类型值为 beforeunloadbubbles布尔值指示事件是否会冒泡默认为 falsecancelable布尔值指示事件是否可以被取消默认为 truetarget事件的目标对象即触发事件的元素 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事件类型值为 unloadbubbles布尔值指示事件是否会冒泡默认为 falsecancelable布尔值指示事件是否可以被取消默认为 falsetarget事件的目标对象即触发事件的元素 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 事件在页面被卸载后触发适用于执行最后的清理操作。 了解页面生命周期事件及其应用场景对于优化页面加载和交互体验非常重要。通过合理利用这些事件我们可以在适当的时机执行相关的逻辑提供更好的用户交互和数据处理。 请大家不吝赐教,在下方评论或者私信我,十分感谢. ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式 ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法 ✅ 对于文章中部分内容不理解 ✅ 解答我文章中一些疑问 ✅ 认为某些交互,功能需要优化,发现BUG ✅ 想要添加新功能,对于整体的设计,外观有更好的建议 最后感谢各位的耐心观看既然都到这了点个 赞再走吧