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

最新推荐文章于 2024-07-29 09:49:14 发布

小帅的编程笔记

最新推荐文章于 2024-07-29 09:49:14 发布

阅读量329

点赞数

分类专栏：小帅的编程笔记文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/cmdfas/article/details/121057180

版权

小帅的编程笔记专栏收录该内容

117 篇文章 4 订阅

订阅专栏

今天我们来学习与页面加载相关的事件，包括 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。

明天我们接着做详细的学习。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新

小帅的编程笔记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS DOM编程复习笔记 - DOMContentLoaded、load、beforeunload 和 unload（十四）

今天我们来学习与页面加载相关的事件，包括 DOMContentLoaded、load、beforeunload 和 unload。简介当我们打开一个页面时，会依次发生以下的事件：DOMContentLoaded – 浏览器完全加载HTML并构建DOM树。但并没有加载外部样式和图片等外部资源。这时我们可以查找DOM节点或者初始化页面等。load – 浏览器完全加载了 HTML 以及图片和样式等外部资源。当我们离开一个页面时，会依次发生以下事件：beforeunload - 在页面被关闭前将触
复制链接

扫一扫