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

news2024/9/21 13:42:36

一、文档加载监听

（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，还加载完成了所有外部资源：图片，样式等。

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

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

相关文章

无心剑七绝《中秋相思》

无心剑七绝《中秋相思》

七绝中秋相思 中秋月满意深长 百代江阳老窖香 莫道天涯情不尽 相思寸寸赋华章 2023年9月29日 平水韵七阳平韵 这首诗七绝《中秋相思》由无心剑所作&#xff0c;以其深情的笔触描绘了中秋夜的相思之情。 诗中首句“中秋月满意深长”即以中秋圆月为起点&#xff0c;勾勒出了一幅…
阅读更多...
相同的数--(力扣)

相同的数--(力扣)

给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1 输入&#xff1a;p [1,2,3], q [1,2,3] 输出&#xff1a;true示例 2&#xff1a; 输入…
阅读更多...
C#/.NET/.NET Core技术前沿周刊 | 第 5 期（2024年9.9-9.15）

C#/.NET/.NET Core技术前沿周刊 | 第 5 期（2024年9.9-9.15）

前言 C#/.NET/.NET Core技术前沿周刊&#xff0c;你的每周技术指南针&#xff01;记录、追踪C#/.NET/.NET Core领域、生态的每周最新、最实用、最有价值的技术文章、社区动态、优质项目和学习资源等。让你时刻站在技术前沿&#xff0c;助力技术成长与视野拓宽。 欢迎投稿&…
阅读更多...
今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 9月16日，星期一

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 9月16日，星期一

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年9月16日 星期一 农历八月十四 1、 台风“贝碧嘉”来袭&#xff0c;上海、杭州发文提醒市民非必要不外出&#xff1b;上海市内高速全部封闭。 2、 中秋假期第一天最热门目的地出炉&#xff1a;北京、成都、上海包揽前三。 …
阅读更多...
下一代 推荐系统：多智能体 + 深度强化学习，充分利用文本信息，更深刻的理解用户真实需求和兴趣点

下一代 推荐系统：多智能体 + 深度强化学习，充分利用文本信息，更深刻的理解用户真实需求和兴趣点

下一代 AI 医疗&#xff1a;知识图谱RAG 多智能体 大模型 推荐&#xff0c;是否有必要&#xff1f;方案一&#xff1a;基于内容的 Agent 推荐方案二&#xff1a;多智能体深度强化学习 推荐强化学习&#xff1a;看、干、想的过程多智能体框架 方案三&#xff1a;在家慢病自管…
阅读更多...
【VSCode】VSCode Background 背景插件辅助窗口程序

【VSCode】VSCode Background 背景插件辅助窗口程序

前排贴上Github项目链接 GitHub窗口项目链接 这是一个基于VSCode上由shalldie上传的background扩展制作的windows窗口程序。 该程序旨在通过窗口程序尽可能的完善该扩展原有的功能。 background - shalldie 的最大优势是我目前仅在其扩展上发现了UseFront的选项&#xff0c;这…
阅读更多...
基于AgentUniverse在金融场景中的多智能体应用探索

基于AgentUniverse在金融场景中的多智能体应用探索

基于AgentUniverse在金融场景中的多智能体应用探索 1.基于大模型智能体超级状态机 智能体、多智能体都是当下的技术热点，但作为一个技术人应该理解，所有的技术都有自己所针对的问题、及其能力边界，并不存在普适的、放诸业务场景皆 work 的技术方案。在这里尝试区分，从大模…
阅读更多...
Cubieboard2（四） 系统构建 —— 基于 mainline

Cubieboard2（四） 系统构建 —— 基于 mainline

文章目录 1 环境准备1.1 编译环境准备1.2 主线源码准备1.2.1 linux 源码1.2.2 U-Boot 源码1.2.3 启动文件 boot.scr1.2.4 根文件系统 rootfs 2 内核编译2.1 添加 tenda aic8800 驱动&#xff08;可选&#xff09;2.2 编译 linux 内核 3 U-Boot 编译4 分区与烧录4.1 sdcard 分区…
阅读更多...
Pocketpair澄清表示《幻兽帕鲁》无意转型免费游戏

Pocketpair澄清表示《幻兽帕鲁》无意转型免费游戏

有报道称&#xff0c;Pocketpair的首席执行官沟部拓郎接受采访暗示&#xff0c;该工作室的热门生存游戏《幻兽帕鲁》可能很快会转为免费游戏&#xff0c;以“延长其寿命”。该工作室现在澄清说&#xff0c;这次采访是几个月前进行的&#xff0c;目前不再有这样的计划。 “我们…
阅读更多...
[产品管理-19]：NPDP新产品开发 - 17 - 产品设计与开发工具 - 实体化设计工具：联合分析、功能分析、FAST技术图和逆向工程

[产品管理-19]：NPDP新产品开发 - 17 - 产品设计与开发工具 - 实体化设计工具：联合分析、功能分析、FAST技术图和逆向工程

目录 前言&#xff1a; 一、什么是实体化设计 1.1 什么是实体化设计 1、定义与概述 2、设计流程 3、关键要素 4、应用领域 5、举例说明 1.2 实体化设计与概念设计的区别 实体化设计 概念设计 区别归纳 1.3 实体化设计与初步设计、规格设计的区别 1、定义与目的 …
阅读更多...
Matlab simulink建模与仿真 第十四章（信号输出库）

Matlab simulink建模与仿真 第十四章（信号输出库）

参考视频&#xff1a;simulink1.1simulink简介_哔哩哔哩_bilibili 一、信号输出库中的模块概览 注&#xff1a;部分模块在第二章中有介绍&#xff0c;本章不再赘述。 二、文件及工作空间模块 1、To File文件模块 &#xff08;1&#xff09;在MATLAB中可用MAT文件对工作区的…
阅读更多...
[数据集][目标检测]无人机识别检测数据集VOC+YOLO格式6986张1类别

[数据集][目标检测]无人机识别检测数据集VOC+YOLO格式6986张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;6986 标注数量(xml文件个数)&#xff1a;6986 标注数量(txt文件个数)&#xff1a;6986 标注…
阅读更多...
理解Android开发中的MVC、MVVM和MVP设计模式

理解Android开发中的MVC、MVVM和MVP设计模式

全篇大概1600 字&#xff0c;建议阅读时间10分钟。 引言 在 Android 应用开发中&#xff0c;设计模式是帮助开发者构建结构清晰、可维护性高的应用程序的关键工具。MVC&#xff08;Model-View-Controller&#xff09;、MVVM&#xff08;Model-View-ViewModel&#xff09;和 MV…
阅读更多...
基于双向RRT算法的三维空间最优路线规划matlab仿真

基于双向RRT算法的三维空间最优路线规划matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 单向RRT算法 4.2 双向RRT算法 5.完整程序 1.程序功能描述 基于双向RRT&#xff08;Randomly Exploring Random Trees, 随机探索随机树&#xff09;算法的三维空间最优路径规划是一种解…
阅读更多...
？？Ansible介绍

？？Ansible介绍

文章目录 一、Ansible基本概述1、什么是以及特性1&#xff09;是什么&#xff1a;2&#xff09;功能 2、架构下充当的角色&#xff1a;3、同软件对比Ansible与SaltStack*YAML的基本语法 Ansible与其他同类软件对比 4、Ansible的架构组成5、Ansible的执行流程 二、简单测试Ansib…
阅读更多...
【Unity踩坑】为什么有Rigidbody的物体运行时位置会变化

【Unity踩坑】为什么有Rigidbody的物体运行时位置会变化

先上图&#xff0c;不知你有没有注意过这个现象呢&#xff1f; 一个物体加上了Rigidbody组件&#xff0c;当勾选上Use Gravity时&#xff0c;运行后&#xff0c;这个物体的位置的值会有变化。这是为什么呢&#xff1f; 刚体由物理系统处理&#xff0c;因此它会对重力、碰撞等做…
阅读更多...
Spring注解@Value的基本知识（附Demo）

Spring注解@Value的基本知识（附Demo）

目录 前言1. 基本知识2. 高级用法3. 彩蛋 前言 对于Java的基本知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;【Java项目】实战CRUD的功能整理&#xff08;持续更新&#xff09; 1. 基本知识 Value 是 Spr…
阅读更多...
Python酷库之旅-第三方库Pandas(118)

Python酷库之旅-第三方库Pandas(118)

目录 一、用法精讲 521、pandas.DataFrame.drop_duplicates方法 521-1、语法 521-2、参数 521-3、功能 521-4、返回值 521-5、说明 521-6、用法 521-6-1、数据准备 521-6-2、代码示例 521-6-3、结果输出 522、pandas.DataFrame.duplicated方法 522-1、语法 522-2…
阅读更多...
每个企业都需要 (但未使用) 的 BYOD 安全解决方案

每个企业都需要 (但未使用) 的 BYOD 安全解决方案

远程办公模式的转变彻底改变了组织管理员工设备的方式。如今&#xff0c;员工希望能够灵活地在任何地方使用任何设备工作&#xff0c;这导致自带设备 (BYOD) 政策被广泛采用。 但随着越来越多的企业采用BYOD&#xff0c;一个问题依然摆在眼前&#xff1a;如何在不侵犯个人隐私…
阅读更多...
ChatGPT的底层逻辑

ChatGPT的底层逻辑

“一些未知的东西正在做我们不知道的事情。” —— 阿瑟爱丁顿 “为何不尝试制作一个模拟儿童思维的程序呢&#xff1f;” —— 艾伦图灵 “只要是人脑能提出的问题&#xff0c;它就能够得到解决。” —— 库尔特哥德尔 开始 传说中的扫地僧&#xff0c;在现实中极其罕见。 有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023