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

news2024/11/13 15:04:30

前言

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 = '';
})

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux | 安装lb-toolkits 1.2.4库

Linux | 安装 lb-toolkits 最近又需要下载葵花的数据,之前分享过一次代码。今天发现之前的环境不小心被我删了,而运行相关的代码需要安装lb-toolkits这个库,今天正好记录了一下安装lb-toolkits的过程。 这里安装的版本是1.2.4,别…

【前端从入门到精通:第十二课: JS运算符及分支结构】

JavaScript运算符 算数运算符 关于自增自减运算 自增或者自减运算就是在本身的基础上进行1或者-1的操作 自增或者自减运算符可以在变量前也可以在变量后,但是意义不同 自增自减运算符如果在变量前,是先进行自增或者自减运算,在将变量给别人用…

基于springboot+vue实现的厨艺交流平台(文末源码+Lw)093

93基于SpringBootVue的实现的厨艺交流平台(源码数据库万字Lun文流程图ER图结构图演示视频软件包) 系统功能: 这次开发的厨艺交流平台功能有个人中心,食材分类管理,用户管理,菜品分类管理,菜谱信…

力扣第一题

1. 两数之和 提示 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。 你可…

CSS技巧专栏:一日一例 2.纯CSS实现 多彩边框按钮特效

大家好,今天是 CSS技巧一日一例 专栏的第二篇《纯CSS实现多彩边框按钮特效》 先看图: 开工前的准备工作 正如昨日所讲,为了案例的表现,也处于书写的习惯,在今天的案例开工前,先把昨天的准备工作重做一遍。 清除浏览器的默认样式定义页面基本颜色设定body的样式清除butt…

深入理解 Qt 的 `moveToThread`:提升多线程应用性能的关键

😎 作者介绍:欢迎来到我的主页👈,我是程序员行者孙,一个热爱分享技术的制能工人。计算机本硕,人工制能研究生。公众号:AI Sun(领取大厂面经等资料),欢迎加我的…

选择排序(C语言版)

选择排序是一种简单直观的排序算法 算法实现 首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置。 再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。 重复第二步&…

CTF php RCE (一)

0x01 引言 首先进入题目 应该是大部分都是一段白盒PHP审计,然后我们为了命令执行,绕过或者是钻空子等等操作,来拿到flag 0x02 基础 0x01 传参方式 这里有两个工具,hackbar和burpsuite,这两个工具非常实用 大家可以自己Googl…

Linux 利用命名空间创建一个自己的“容器“

Linux 利用命名空间创建一个自己的"容器" 前置条件 创建一个目录存放容器mkdir /myapp准备静态编译busybox,操作系统自带的往往是依赖动态库的(本文使用的debian apt install busybox-static) 开始 使用unshare起一个独立命名空间.# 进入后/myapp目录…

办公助手推荐✨

办公助手来啦!✨ 办公助手来啦!✨🌟 主要亮点📝 全新PDF编辑器🎨 丰富的幻灯片版式🌍 改进的从右至左显示🌐 新增本地化选项 📊 应用场景在线办公套件📱 多平台支持&…

【YOLO8系列】(二)YOLOv8环境配置,手把手嘴对嘴保姆教学

目录 一. 准备环境 1.Anaconda下载 2.创建yolov8虚拟环境 3.pytorch安装 4.CUDA下载 5.CUDNN下载 二、yolov8模型下载 1.clone模型 2.pycharm配置 ①解释器配置 ②终端配置 3.安装必要库 4.下载训练模型 三、 环境验证 四、总结 YOLOv8 是 YOLO 系列最新的目标…

Springboot各个版本维护时间

Springboot各个版本维护时间

大话光学原理:1.“实体泛光说”、反射与折射

一、实体泛光说 在古希腊,那些喜好沉思的智者们中,曾流传着一个奇妙的设想:他们认为,我们的眼睛仿佛伸出无数触手般的光线,这些光线能向四面八方延伸,紧紧抓住周围的每一个物体。于是,当我们凝视…

Linux:进程间通信(二.共享内存详细讲解以及小项目使用和相关指令、消息队列、信号量)

Linux:进程间通信(二.共享内存详细讲解以及小项目使用和相关指令、消息队列、信号量) 上次结束了进程间通信一:Linux:进程间通信(一.初识进程间通信、匿名管道与命名管道、共享内存) 文章目录 …

分布式IO模块软件配置

组态接口模块 1、打开网络视图 2、拖拽出ET200SP 3、双击ET200SP的图片,进入从站配置 总线适配器的组态更换 关于IO地址分配,需要建立好子网通信后,在主机上配置。 可以看到IP 和设备名 设备与控制器的Profinet连接 先找到设备名称再找…

H桥驱动器芯片详解

H桥驱动器芯片详解 上一篇文章讲解了H桥驱动器的控制原理,本文以汽车行业广泛应用的DRV8245芯片为例,详细讲解基于集成电路的H桥驱动器芯片。 1.概述 DRV824x-Q1系列器件是德州仪器(TI)的一款专为汽车应用设计的全集成H桥驱动器…

Linux——开发工具

1.yum yum是centos中的一个软件下载安装管理客户端,可以下载需要的软件或者解决依赖关系问题(如动态库)。程序都是来源于一段源代码,为了方便下载,源代码被提前在不同的环境下编译好生成对应的yum软件包,存…

微信小程序毕业设计-书店系统项目开发实战(附源码+论文)

大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:微信小程序毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计…

自动群发消息插件常用源代码科普!

随着网络技术的快速发展,自动群发消息插件成为了众多企业和个人提高效率、加强沟通的重要工具。 然而,开发一个高效且稳定的自动群发消息插件并非易事,需要深入理解并熟练掌握相关的源代码。 本文将从五个方面,通过具体的源代码…

【Java】搜索引擎设计:信息搜索怎么避免大海捞针?

一、内容分析 我们准备开发一个针对全网内容的搜索引擎,产品名称为“Bingoo”。 Bingoo的主要技术挑战包括: 针对爬虫获取的海量数据,如何高效地进行数据管理;当用户输入搜索词的时候,如何快速查找包含搜索词的网页…