DOM(文档对象模型)生命周期事件

前言

DOM 生命周期事件涉及到从创建、更新到销毁 DOM 元素的不同阶段。

● 我们来看下当HTML文档加载完再执行JavaScript代码

document.addEventListener('DOMContentLoaded', function (e) {
  console.log('HTML parsed adn DOM tree built!', e);
})

在这里插入图片描述

● 除此之外,浏览器在解析 HTML 时会逐行加载并执行

● 监听 load 事件当整个页面及其依赖资源(如图片、样式表)全部加载完成时触发。这种事件对应于 DOM 生命周期中的最后阶段,标志着页面的完全加载,开发者可以在这时执行最终的初始化操作或其他相关任务。

window.addEventListener('load', function (e) {
  console.log('Page fully loaded', e);
})

在这里插入图片描述

卸载之前

在用户即将离开当前页面时触发

window.addEventListener('beforeunload', function (e) {
  e.preventDefault();
  console.log(e);
  e.returnValue = '';
})

现在不生效了,因为这种方法被很多人滥用,让用户无法正常的关闭页面!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/787321.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch详细介绍

B站对应视频: Elasticsearch01-01.为什么学习elasticsearch_哔哩哔哩_bilibili 大多数日常项目,搜索肯定是访问频率最高的页面之一。目前搜索功能是基于数据库的模糊搜索来实现的,存在很多问题。 首先,查询效率较低。 由于数据…

【work】AI八股-神经网络相关

Deep-Learning-Interview-Book/docs/深度学习.md at master amusi/Deep-Learning-Interview-Book GitHub 网上相关总结: 小菜鸡写一写基础深度学习的问题(复制大佬的,自己复习用) - 知乎 (zhihu.com) CV面试问题准备持续更新贴 …

如何在 SwiftUI 中开发定制 MapKit 功能

文章目录 介绍地图样式imagery-map 地图交互地图控件总结 介绍 在上一篇文章中,我们探讨了 SwiftUI 中新的 MapKit API 的基础知识。现在,让我们深入 MapKit API 的定制点,以便根据我们的需求定制地图呈现。 地图样式 新的 MapKit API 引入…

藏汉翻译通作为翻译软件的优势有哪些?

藏汉翻译通作为一款专业的藏汉双语翻译软件,具有以下优势: 人工智能技术应用:藏汉翻译通利用了人工智能翻译和语音识别合成技术,提供智能藏文翻译服务。 高准确率:文字识别准确率可达90%,语音识别转化文字…

pytest-yaml-sanmu(六):YAML数据驱动测试

如果说 pytest 中哪些标记使用得最多,那无疑是 parametrize 了, 它为用例实现了参数化测试的能力,进而实现了数据驱动测试的能力。 1. 使用标记 parametrize 的使用需要提高两个内容: 参数名 参数值 pytest 在执行用例时&…

【面试八股总结】线程基本概念,线程、进程和协程区别,线程实现

一、什么是线程? 线程是“轻量级进程”,是进程中的⼀个实体,是程序执⾏的最小单元,也是被系统独立调度和分配的基本单位。 线程是进程当中的⼀条执行流程,同⼀个进程内多个线程之间可以共享代码段、数据段、打开的文件…

MySQL手注之布尔型盲注详解

布尔型盲注简介 基于布尔型SQL盲注即在SQL注入过程中,应用程序仅仅返回True(页面)和False(页面)。 这时,我们无法根据应用程序的返回页面得到我们需要的数据库信息。但是可以通过构造逻辑判断(…

同星智能正式推出CAN总线一致性测试系统

CAN总线一致性测试系统 CAN FD/CAN总线一致性测试系统,在硬件系统上基于同星自主研发的总线分析工具,干扰仪,一致性测试机箱,并搭配程控电源,示波器,数字万用表等标准外围仪器设备;在软件上基于…

算力狂飙|WAIC 2024上的服务器

7月7日,2024世界人工智能大会暨人工智能全球治理高级别会议(WAIC 2024)在上海落下帷幕。这场备受瞩目的AI盛宴与热辣夏日碰撞,吸引了全球科技、产业及学术界的广泛关注,线下参观人数突破30万人次,线上流量突…

【排序算法】快速排序(详解+各版本实现)

目录 一.交换排序 1.基本思想 2.冒泡排序 二.快速排序 1.hoare版本 2.挖坑法 3.前后指针版本 4.优化 优化①:三数取中 优化②:小区间优化 5.非递归版本 6.特性总结 ①效率 ②时间复杂度:O(N*logN) ③空间复杂度:O(l…

【vue】JSON数据导出excel

前言 导出方式有很多种,但是若只需要数据导出成.xlsx文件并下载的话,只用xlsx一个插件就行 目标 1 实现数据导出excel 2 如何设置表格列宽 3 如何在文件中创建工作表 准备工作 1 安装 npm i xlsx -S 2 引入 npm i xlsx -S 二、导出excel 创建文件 con…

【IMU】 温度零偏标定

温度标定 IMU的零偏随着温度的变化而变化,在全温范围内形状各异,有些可能是单调的,有些可能出现拐点。 多项式误差温度标定 目的是对估计的参数进行温度补偿,获取不同温度时的参数值(零偏、尺度、正交)&…

C++笔试强训3

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、选择题1-5题6-10题 二、编程题题目一题目二 一、选择题 1-5题 如图所示,如图所示p-3指向的元素是6,printf里面的是%s,从6开…

LLM应用构建前的非结构化数据处理(一)标准化处理认识数据

1.学习内容 本节次学习内容来自于吴恩达老师的Preprocessing Unstructured Data for LLM Applications课程,因涉及到非结构化数据的相关处理,遂做学习整理。 2.相关环境准备 2.1 建议python版本在3.9版本以上 chromadb0.4.22 langchain0.1.5 langcha…

【电脑应用技巧】如何寻找电脑应用的安装包华为电脑、平板和手机资源交换

电脑的初学者可能会直接用【百度】搜索电脑应用程序的安装包,但是这样找到的电脑应用程序安装包经常会被加入木马或者强制捆绑一些不需要的应用装入电脑。 今天告诉大家一个得到干净电脑应用程序安装包的方法,就是用【联想的应用商店】。联想电脑我是一点…

数字化转型:企业法务管理的未来发展 ​​​

在数字化浪潮的推动下,企业法务管理正经历着前所未有的变革。传统的法务工作模式在数据处理、合同审查、风险评估等方面逐渐显得力不从心。面对这一挑战,企业法务管理的数字化转型成为提升效率、保障合规、优化法律服务的必然选择。 数字化转型涉及到法…

【Java算法】二分查找 下

🔥个人主页: 中草药 🔥专栏:【算法工作坊】算法实战揭秘 一.山脉数组的峰顶索引 题目链接:852.山脉数组的峰顶 ​ 算法原理 这段代码实现了一个查找山峰数组中峰值索引的算法。山峰数组是一个先递增后递减的数组&…

前端图表库G2快速上手

文档地址&#xff1a; https://g2-v3.antv.vision/zh/docs/manual/getting-started/ https://g2.antv.antgroup.com/ 安装&#xff1a; pnpm i antv/g2在vue3中使用&#xff1a; <script setup> import {Chart} from antv/g2; import {onMounted} from "vue"…

智慧运维管理平台建设方案(PPT原件)

1、智慧运维系统建设背景 2、智慧运维系统建设目标 3、智慧运维系统建设内容 4、智慧运维系统建设技术 5、智慧运维系统建设流程 6、智慧运维系统建设收益 软件全套资料获取及学习&#xff1a;本文末个人名片直接获取或者进主页。

咱迈出了模仿的第一大步!快进来看看~

微信公众号&#xff1a;牛奶Yoka的小屋 有任何问题。欢迎来撩~ 最近更新&#xff1a;2024/06/28 [大家好&#xff0c;我是牛奶。] 这是第一篇模仿文章。咱决定先模仿样式&#xff0c;从外至里&#xff0c;层层递进。于是找了几个大V的公众号&#xff0c;看来看去&#xff0c;发…