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

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

news 2025/6/8 8:14:01

一、文档加载监听

（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

WordZero：让Markdown与Word文档自由转换的Golang利器

在日常工作中&#xff0c;我们经常需要在Markdown和Word文档之间进行转换。Markdown方便编写和版本控制&#xff0c;而Word文档更适合正式的商务环境。作为一名Golang开发者&#xff0c;我开发了WordZero这个库&#xff0c;专门解决这个痛点。 项目背景 GitHub仓库&#xff1…...

编程新知 2025/6/8 8:03:54

Vue-3-前端框架Vue基础入门之VSCode开发环境配置和Tomcat部署Vue项目

文章目录 1 安装配置VSCode1.1 安装中文语言插件1.2 主题颜色1.3 禁用自动更新1.4 开启代码提示设置1.5 安装open in browser插件2 安装配置nodejs2.1 配置环境变量2.2 npm与maven的区别2.3 使用npm避坑3 创建Vue项目3.1 两种创建方式3.2 package.json3.3 安装新的依赖3.4 运行…...

编程新知 2025/6/8 3:46:03

网络安全厂商F5推出AI Gateway，化解大模型应用风险

AI正以前所未见的速度重塑数字化体验。然而&#xff0c;企业在加速落地现代化数字体验的过程中&#xff0c;其在保障和交付AI应用方面仍面临严峻挑战。这些应用需处理海量数据&#xff0c;涉及复杂流量模式&#xff0c;并引入更高级的安全威胁&#xff0c;而企业当前的安全能力…...

编程新知 2025/6/8 1:18:17

NoSQl之Redis部署

一、Redis 核心概念与技术定位 1. 数据库分类与 Redis 的诞生背景 关系型数据库的局限性 数据模型&#xff1a;基于二维表结构&#xff0c;通过 SQL 操作&#xff0c;强一致性&#xff08;ACID 特性&#xff09;&#xff0c;适合结构化事务场景&#xff08;如银行转账、订单管…...

编程新知 2025/6/7 23:45:16

SmolVLA: 让机器人更懂 “看听说做” 的轻量化解决方案

&#x1f9ed; TL;DR 今天&#xff0c;我们希望向大家介绍一个新的模型: SmolVLA&#xff0c;这是一个轻量级 (450M 参数) 的开源视觉 - 语言 - 动作 (VLA) 模型&#xff0c;专为机器人领域设计&#xff0c;并且可以在消费级硬件上运行。 SmolVLAhttps://hf.co/lerobot/smolvla…...

编程新知 2025/6/7 23:41:04

青少年编程与数学 01-011 系统软件简介 05 macOS操作系统

青少年编程与数学 01-011 系统软件简介 05 macOS操作系统 一、历史发展&#xff08;一&#xff09;经典 Mac OS&#xff08;1984-2001&#xff09;&#xff08;二&#xff09;Mac OS X&#xff08;2001-2016&#xff09;&#xff08;三&#xff09;macOS&#xff08;2016-至今&…...

编程新知 2025/6/7 15:57:17

【推荐算法】NeuralCF：深度学习重构协同过滤的革命性突破

NeuralCF&#xff1a;深度学习重构协同过滤的革命性突破 一、算法背景知识&#xff1a;协同过滤的演进与局限1.1 协同过滤的发展历程1.2 传统矩阵分解的缺陷 二、算法理论/结构&#xff1a;NeuralCF架构设计2.1 基础NeuralCF结构2.2 双塔模型进阶结构2.3 模型实现流程对比 三、…...

编程新知 2025/6/7 15:05:02

NoSQL之redis哨兵

一、哨兵的核心功能 监控&#xff08;Monitoring&#xff09; 持续检查主节点和从节点的运行状态&#xff08;是否存活、延迟等&#xff09;。 自动故障转移&#xff08;Automatic Failover&#xff09; 当主节点不可用时&#xff0c;自动选举一个从节点升级为主节点。 更新…...

编程新知 2025/6/7 14:38:30

最新研究揭示云端大语言模型防护机制的成效与缺陷

一项全面新研究揭露了主流云端大语言模型&#xff08;LLM&#xff09;平台安全机制存在重大漏洞与不一致性&#xff0c;对当前人工智能安全基础设施现状敲响警钟。该研究评估了三大领先生成式AI平台的内容过滤和提示注入防御效果&#xff0c;揭示了安全措施在阻止有害内容生成与…...

编程新知 2025/6/7 14:06:26

第2天：认识LSTM

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标 具体实现 &#xff08;一&#xff09;环境 语言环境&#xff1a;Python 3.10 编 译 器: PyCharm 框 架: pytorch &#xff08;二&#xff09;具体步骤…...

编程新知 2025/6/7 12:01:52