当前位置： 首页 > news >正文

四、（JS）JS中常见的加载事件

news 2026/1/2 1:35:21

一、文档加载监听

（1）抛出疑惑，什么是文档加载监听？为什么要有这个东西？

老样子，我们先讲一个场景，带着大家熟悉为什么会有文档加载监听，是来解决什么问题来着的。

我们先看下这段代码~

下面这段代码是不是我们可以将boxEl这个元素设置背景为红色？

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><div class="box"></div><script>var boxEl = document.querySelector(".box")boxEl.style.backgroundColor = "red"</script></body></html>

我们看下效果，很明显可以。

我们再把代码位置换一下，这个时候可以设置背景成功吗？

答：很明显不行，因为执行js代码里的时候，还找不到boxEl元素（还没加载）。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>var boxEl = document.querySelector(".box")boxEl.style.backgroundColor = "red"</script><div class="box"></div></body></html>

 

 

可以解决这个问题吗？答：当然可以，我们只需要将这行代码执行完就可以了。

  <div class="box"></div>

换句话来说，我们只需要把js里面的设置背景相关的代码，写一个事件监听。

（2）文档加载监听 onload

当我们这样子写的时候，function里面的代码不会立即执行，只有等浏览器把全部加载完成过后才会回调这个函数。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>// 注册事件监听window.onload = function () {var boxEl = document.querySelector(".box")boxEl.style.backgroundColor = "red"}</script><div class="box"></div></body></html>

（3）DOMContentLoaded事件

DOMContentLoaded事件是在Web开发中经常使用的事件，它表示当文档的主体内容已经被完全加载并解析完成，但可能还包含一些外部资源如图片、样式表或脚本的异步加载。简单来说，当浏览器完成了HTML标签的解析，并认为页面的主要结构已经就绪时，DOMContentLoaded事件就会触发。

这个事件对于JavaScript开发者很重要，因为它意味着他们可以在DOM树准备就绪之后立即开始操作DOM元素，而不需要等待所有内容下载完毕。这意味着可以避免阻塞用户界面，提升用户体验。例如，你可以在这时候执行某些初始化逻辑或者开始动画效果。

所以如下代码中，img本身是内容的一部分，但是img中src指向的图片地址，就不是属于内容的一部分。（为什么？这是浏览器指定的哈，记住就好 不用过多纠结）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>// 注册事件监听window.addEventListener("DOMContentLoaded", function () {// 1. 这里可以操作box,box已经加载完毕var boxEl = document.querySelector(".box")boxEl.style.backgroundColor = "red"console.log("HTML内容加载完毕");})window.onload = function () {// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"// console.log("文档中所有资源都加载完毕");}</script><div class="box"><p>哈哈哈哈</p></div><a href="#">百度一下</a><img src="../images/dog.jpg" alt=""></body></html>

（4）window.onload 和 DOMContentLoaded区别

所以从上面2、3点可以得出结论了吧，我们总结一下。

  • DOMContendLoaded：浏览器已完全加载HTML，并构建了DOM树，但像<img>和样式表之类的外部资源可能尚未加载完成。（img本身是内容的一部分，但是img中src指向的图片地址，就不是属于内容的一部分。（为什么？这是浏览器指定的哈，记住就好 不用过多纠结））
  • load：浏览器不仅加载完成了HTML，还加载完成了所有外部资源：图片，样式等。

（5）验证区别

我在window.addEventListener监听的时候为什么打印不出来img图片占据的宽度和高度？

  1. 因为我在img元素里压根没跟他设置style=XXXX 
    <img src="../images/dog.jpg" alt="">

    <img src="../images/dog.jpg" alt="" style="width:200px;height:200px">

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>// 注册事件监听window.addEventListener("DOMContentLoaded", function () {// 1. 这里可以操作box,box已经加载完毕// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"// console.log("HTML内容加载完毕");// 2. 获取img对应图片的宽度和高度var imgEl = document.querySelector("img")console.log("图片的宽度和高度", imgEl.style.width, imgEl.style.height);})window.onload = function () {// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"console.log("文档中所有资源都加载完毕");}</script><div class="box"><p>哈哈哈哈</p></div><a href="#">百度一下</a><img src="../images/dog.jpg" alt=""></body></html>

 那我们该怎么拿img图片所占据的空间？用 offsetWidth offsetHeight

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>// 注册事件监听window.addEventListener("DOMContentLoaded", function () {// 1. 这里可以操作box,box已经加载完毕// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"// console.log("HTML内容加载完毕");// 2. 获取img对应图片的宽度和高度var imgEl = document.querySelector("img")// console.log("图片的宽度和高度", imgEl.style.width, imgEl.style.height);console.log("图片的宽度和高度", imgEl.offsetWidth, imgEl.offsetHeight);})window.onload = function () {// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"console.log("文档中所有资源都加载完毕");}</script><div class="box"><p>哈哈哈哈</p></div><a href="#">百度一下</a><img src="../images/dog.jpg" alt=""></body></html>

我们看下打印结果：说明什么？ 说明图片压根没加载出来。这个案例是不是验证了：

DOMContendLoaded：浏览器已完全加载HTML，并构建了DOM树，但像<img>和样式表之类的外部资源可能尚未加载完成。（img本身是内容的一部分，但是img中src指向的图片地址，就不是属于内容的一部分。（为什么？这是浏览器指定的哈，记住就好 不用过多纠结））

那我们放到window.onload试一下看看。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>// 注册事件监听window.addEventListener("DOMContentLoaded", function () {// 1. 这里可以操作box,box已经加载完毕// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"// console.log("HTML内容加载完毕");// 2. 获取img对应图片的宽度和高度// var imgEl = document.querySelector("img")// console.log("图片的宽度和高度", imgEl.style.width, imgEl.style.height);// console.log("图片的宽度和高度", imgEl.offsetWidth, imgEl.offsetHeight);})window.onload = function () {// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"var imgEl = document.querySelector("img")console.log("文档中所有资源都加载完毕");console.log("图片的宽度和高度", imgEl.offsetWidth, imgEl.offsetHeight);}</script><div class="box"><p>哈哈哈哈</p></div><a href="#">百度一下</a><img src="../images/dog.jpg" alt=""></body></html>

打印结果如下，是不是验证成功了？

load：浏览器不仅加载完成了HTML，还加载完成了所有外部资源：图片，样式等。

相关文章：

四、（JS）JS中常见的加载事件

一、文档加载监听 &#xff08;1&#xff09;抛出疑惑&#xff0c;什么是文档加载监听&#xff1f;为什么要有这个东西&#xff1f; 老样子&#xff0c;我们先讲一个场景&#xff0c;带着大家熟悉为什么会有文档加载监听&#xff0c;是来解决什么问题来着的。 我们先看下这段…...

编程日记 2024/9/16 21:36:41

[网络]https的概念及加密过程

文章目录 一. HTTPS二. https加密过程 一. HTTPS https本质上就是http的基础上增加了一个加密层, 抛开加密之后, 剩下的就是个http是一样的 s > SSL HTTPS HTTP SSL 这个过程, 涉及到密码学的几个核心概念 明文 要传输的真正意思是啥 2)密文 加密之后得到的数据 这个密文…...

编程日记 2024/9/16 21:35:39

React 嵌套类名样式不生效

修改前 父级.blog样式生效&#xff0c;子级.circle样式不生效 // app/blog/page.js import styles from "./page.module.scss"export default function Blog () {return (<div className{styles.blog}><div classNamecircle><div /></div>…...

编程日记 2024/9/16 21:34:38

20Kg载重30分钟续航多旋翼无人机技术详解

一、机架与结构设计 1. 材料选择&#xff1a;为了确保无人机能够承载20Kg的负载&#xff0c;同时实现30分钟的续航&#xff0c;其机架材料需选用轻质高强度的材料&#xff0c;如碳纤维或铝合金。这些材料不仅具有良好的承重能力&#xff0c;还能有效减轻无人机的整体重量&…...

编程日记 2024/9/16 21:33:37

详解c++：认识类

文章目录 前言一、类是什么二、类&#xff08;class&#xff09;的使用publicprivate&#xff1a;protected&#xff1a; 前言 C 是一种面向对象的编程语言。面向对象编程是一种编程范式&#xff0c;它使用“对象”来设计软件应用程序。在面向对象编程中&#xff0c;对象包含了…...

编程日记 2024/9/16 21:32:36

HTML5中的重要元素详解

第3章 HTML5中的重要元素 3.1 html根元素 HTML文档中&#xff0c;元素html代表了文档的根&#xff0c;其他所有元素都是在该元素的基础上进行延伸或拓展的&#xff0c;该元素也是HTML文档的最外层元素&#xff0c;因此也称为根元素。 html元素的常用属性&#xff1a; manif…...

编程日记 2024/9/16 21:31:35

八股文知识汇总（常考）

八股文知识汇总&#xff08;常考&#xff09; 语言特性相关 JAVA知识 - JDK动态代理为什么只能代理有接口的类&#xff1f; 说一下对象创建的过程&#xff1f;ThreadLocal是什么&#xff1f;他的实现原理是什么&#xff1f;ThreadLocal会出现内存泄露吗&#xff1f;String、…...

编程日记 2024/9/16 21:29:33

unity 图片置灰shader

我和chatgpt真强&#xff01; 在 Unity 编辑器中&#xff0c;右键点击 Assets 文件夹&#xff0c;选择 Create -> Shader -> Unlit Shader。shader代码如下&#xff0c;尽管我看的不是很懂&#xff0c;但确实有用 Shader "Custom/GrayScaleShader" {Properti…...

编程日记 2024/9/16 21:28:31

【C语言】（指针系列2）指针运算+指针与数组的关系+二级指针+指针数组+《剑指offer面试题》

前言&#xff1a;开始之前先感谢一位大佬&#xff0c;清风~徐~来-CSDN博客&#xff0c;由于是时间久远&#xff0c;博主指针的系列忘的差不多了&#xff0c;所以有些部分借鉴了该播主的&#xff0c;有些地方如果解释的不到位&#xff0c;请翻看这位大佬的&#xff0c;感谢大家&…...

编程日记 2024/9/16 21:27:30

探索信号处理：使用傅里叶小波变换分析和恢复信号

在现代信号处理领域&#xff0c;傅里叶变换是分析和处理信号的一种基本工具。然而&#xff0c;传统的傅里叶变换在处理非平稳信号时存在局限性&#xff0c;因为它无法同时提供时间和频率的信息。为了克服这一挑战&#xff0c;傅里叶小波变换&#xff08;FSWT&#xff09;应运而…...

编程日记 2024/9/16 21:26:29

俄罗斯方块——C语言实践(Dev-Cpp)

目录 1、创建项目(尽量不使用中文路径) 2、项目复制 3、项目配置 ​1、调整编译器 2、在配置窗口选择参数标签 3、添加头文件路径和库文件路径 4、代码实现 4.1、main.c 4.2、draw.h 4.3、draw.c 4.4、shape.h 4.5、shape.c 4.6、board.h 4.7、board.c 4.8、cont…...

编程日记 2024/9/16 21:24:27

关于wp网站出现的问题

问题1 问题1&#xff1a;如果出现这个界面的问题 说明是根目录的index.php编码出了问题&#xff0c;用备份的源文件退换一下即可。 问题2 问题2&#xff1a;如果出现页面错位现象&#xff0c;可能是某个WP插件引起的问题&#xff0c;这里需要逐步排查插件&#xff0c;或者你刚…...

编程日记 2024/9/16 21:22:25

为什么H.266未能普及？EasyCVR视频编码技术如何填补市场空白

H.266&#xff0c;也被称为Versatile Video Coding&#xff08;VVC&#xff09;&#xff0c;是近年来由MPEG&#xff08;Moving Picture Experts Group&#xff09;和ITU&#xff08;International Telecommunication Union&#xff09;联合开发并发布的新一代国际视频编码标准…...

编程日记 2024/9/16 21:21:24

最全 高质量 大模型 -评估基准数据集（不定期更新）

评估基准是推动人工智能领域技术进步和应用落地的关键工具&#xff0c;通过这些基准&#xff0c;我们可以更全面地理解LLMs的能力&#xff0c;并指导未来的研究和实践。 评估基准&#xff0c;是一套衡量标准&#xff0c;就像老师用考试来检查学生学得怎么样。在大模型的世界里…...

编程日记 2024/9/16 21:20:23

react 中， navigate 跳转链接 2种写法

react 中&#xff0c; navigate 下面2种写法&#xff0c; 有什么区别, import { useNavigate } from "react-router-dom"; const navigate useNavigate(""); onClick{() > navigate("/signup")}import { Navigate } from "react-route…...

编程日记 2024/9/16 21:15:19

k8s Service 服务

文章目录 一、为什么需要 Service二、Kubernetes 中的服务发现与负载均衡 -- Service三、用例解读1、Service 语法2、创建和查看 Service 四、Headless Service五、集群内访问 Service六、向集群外暴露 Service七、操作示例1、获取集群状态信息2、创建 Service、Deployment3、创…...

编程日记 2024/9/16 21:11:15

安全建设当中的冷门知识

今天说点有趣的话题&#xff0c;也是因为在安全建设过程中&#xff0c;安全员也不太可能都按照最理想的状态去工作&#xff0c;有资源的问题&#xff0c;有管理惰性问题&#xff0c;当然也有管理者本身决策的问题。 安全行业起步较晚&#xff0c;16年才施行网络安全法&#xff…...

编程日记 2024/9/16 21:09:13

python画图|极坐标下的3D surface

前述学习过程中&#xff0c;我们已经掌握了3D surface的基本绘制技巧&#xff0c;详见链接&#xff1a; python画图|3D surface基础教程-CSDN博客 基础教程中的3D surface绘制位于笛卡尔坐标系&#xff0c;但有时候会用到极坐标绘图。虽然我们已经学过简单的极坐标绘图技巧&a…...

编程日记 2024/9/16 21:05:09

html+css+js网页设计 旅游 大理旅游7个页面

htmlcssjs网页设计 旅游 大理旅游7个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#…...

编程日记 2024/9/16 21:04:08

Day 29~42 JavaWeb

Java Web 1、基本概念 1.1、前言 web开发&#xff1a; web&#xff0c;网页的意思&#xff0c;www.baidu.com静态web html&#xff0c;css 提供给所有人看的数据始终不会发生变化动态web 淘宝&#xff0c;几乎是所有的网站 提供给所有人看的数据始终会发生变…...

编程日记 2024/9/16 21:01:05

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/12/24 3:40:16

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/12/28 20:49:49

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/12/23 12:38:37

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/12/26 15:35:33

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/12/21 22:08:53

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/12/25 7:21:38

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/12/26 18:51:33

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2025/12/31 22:37:30

Python Einops库：深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

编程新知 2025/10/16 12:04:52

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/11/1 2:00:51