Web API --DOM3

最新推荐文章于 2024-11-12 11:19:19 发布

茶语1024

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量94

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/IDE1203/article/details/132138326

版权

Web API --DOM3

DOM3

什么是事件流？

事件流指的是被事件完整执行时的流动路径。

事件流包含了两个阶段分别是
- 捕获阶段（从父到子，理解：由大到小，大鱼捕获小鱼）
- 冒泡阶段（从子到父，理解：由小到大，气泡是由小逐渐变大的）
事件捕获指的是什么？

事件捕获是指：从DOM的根元素开始去执行对应的事件 (从外到里)，注意：是针对DOM对象。

语法：DOM.addEventListener(事件类型，事件函数，是否使用捕获机制)

注意：
- 第三个参数只能填布尔值（可选），即true和false。填true表示捕获阶段触发；填false表示冒泡阶段触发，默认就是false。
- 若是用 L0 事件（旧版本）监听，则只有冒泡阶段，没有捕获。
- 若是用L2事件（较新版本）监听第三个参数是 false，或者默认都是冒泡。
既然无论是新版本事件监听还是旧版本事件监听用得比较多的就是冒泡阶段。那么我们得来了解一下事件冒泡的概念：

事件冒泡是由子到父的，当一个元素（该元素作为子元素）的事件被触发，那么之后同样的事件将会在它的所有祖先元素中依次被触发。

（理解：子不教父之过，儿子的过错会连累到父亲）

也就是当一个元素触发事件后，会依次向上调用所有父级元素的同名事件。
阻止冒泡与解绑事件分别指的是什么？

阻止冒泡：

事件冒泡带来的问题：事件监听默认用冒泡模式，会容易导致事件影响到父级元素。

若我们只想把该事件限制在当前元素中，就得阻止事件冒泡

前提是得让事件冒泡拿到事件对象。

阻止事件冒泡的语法：事件对象.stopPropagation()

注意：该方法可以阻断事件的传播，既可以用在捕获阶段，也可以用在冒泡阶段。

某些情况下得阻止默认行为的发生，比如：阻止链接跳转。

语法：e.preventDefault()

例子：

解绑事件：
- L0事件监听：它的语法（绑定事件的语法）是：对象.on类型=事件函数
我们想要解绑事件，可以使用null覆盖就能实现，原因是同一个对象后面注册的事件会覆盖前面注册的。 L0事件监听都是在冒泡阶段执行

解绑语法：对象.on类型 = null

例子：

btn.onclick = function(){

alert('点击了')}

btn.onclick = null
- L2事件监听：之前文章提到的事件监听的语法就是指L2版本的事件监听的语法。
即addEventListener.该类事件监听是得用:removeEventListener（事件类型，事件函数，[获取捕获或者冒泡阶段]）

L2事件监听得看第三个参数才能确定是在冒泡或者捕获阶段执行

例子：

注意：匿名函数是无法被解绑的
何为事件委托？

事件委托利用了事件冒泡的特点（从子到父），也就是委托给了父元素。

我们想要给父元素注册事件，可以利用触发子元素时会冒泡到父元素身上，从而触发了父元素的事件。

可以用：事件对象.target.tagName 找到真正的触发事件元素（ul是父元素，LI是子元素，其实触发事件元素的是子元素）。例如：

事件委托的优点：可以减少注册次数，提高程序性能。
请谈谈页面加载事件、页面滚动事件、页面尺寸事件分别是做什么用的？

页面加载事件：
- 页面加载事件的一种类型是load 。
- 当加载完外部资源（如图片、外部的css、js等），加载完后触发的事件。
- 学习它的理由：若是我们习惯把script写在head中，这个时候直接找dom元素就会找不到。还有就是得等页面资源全部处理完才能做一些事情。
- 不仅可以用来监听整个页面加载完毕，也可以用来针对某个资源绑定load事件。
- 例子：给 window 添加 load 事件
另外一种类型是DOMContentLoaded。
- 使用场景：
  
  当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完
  全加载
- 例子：给 document 添加 DOMContentLoaded 事件

在这里插入图片描述

页面滚动事件：

滚动条在滚动的时候持续触发的事件。
事件名（事件类型）：scroll
学习它的理由：很多网页需要检测用户把页面滚动到某个区域后做一些处理。比如说当用户将页面滚动到末尾需要返回顶部时，它可以帮助我们自动回到顶部。
监听某个元素的内部滚动直接给某个元素加即可。
此外该事件类型还有两个常用的属性：scrollLeft和scrollTop

获取元素内容往左、往上滚出去看不到的距离；

这两个值是可读写的；

获取被卷去的大小。
检测页面滚动的头部距离（被卷去的头部）用的属性是document.documentElement.scrollTop

假设我们想要滚动到页面的中间，（滚动到指定位置的方法）可以使用scrollTo()方法。

该方法可以把内容滚动到指定的坐标上。

语法：对象.scrollTo(x,y)

页面尺寸事件：

该事件会在窗口尺寸改变的时候触发事件：
事件类型名：resize

想要获取元素的可见部分宽高（不包含margin、border等）可用clientWidth和clientHeight属性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JIhBdjf7-1691342331441)(C:\Users\86157\Downloads\uTools_1691341864978.png)]

例如：检测屏幕宽度：

window.addEventListener('resize',function(){

let w = document.documentElement.clientWidth

console.log(w)

})