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

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

news 2024/11/20 4:23:56

一、文档加载监听

（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图片占据的宽度和高度？

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