Spirit带你彻底了解事件捕获和冒泡机制
Dom标准事件模型
在Dom标准事件模型中,事件是先进行捕获,达到目标阶段时,在进行冒泡的
捕获阶段==>目标阶段==>冒泡阶段
目标元素和非目标元素
在介绍事件捕获和事件冒泡前
我们先要了解一下目标元素和非目标元素是什么意思
- 目标元素:它是我们当前触发事件的元素
- 非目标元素:它是在捕获阶段或着冒泡阶段中因为绑定了同类型的事件而触发的元素
- 每个Dom元素可以绑定多个事件,前提是使用
addEvenetListener去添加事件,即使是相同的事件,也可以重复绑定.
事件捕获
从页面的根元素开始 一层一层的往下寻找
可以看下我在最上面画的那张图
事件冒泡
从目标元素一直往上寻找
可以看下我在最上面的那张图
addEventListener
addEventListener可以传入第三个参数useCapture,默认是false其实还有一个option参数可以传递,但是我没细看,因为目前我看了,我也不知道应用场景,所以打算有需求了,后面在看
- 当
useCapture参数会false时,默认是捕获阶段 不会触发事件监听,会在冒泡阶段触发事件监听 - 当
useCapture参数会true时,事件监听时从捕获阶段开始,但是冒泡阶段不会触发事件监听
举例说明
现在我们来分析一道题, 布局代码都在下面了
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.c {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
<body>
<div class="a">
a
<div class="b">
b
<div class="c">c</div>
</div>
</div>
</body>
<script src="./script.js"></script>
</html>
JS代码
const a = document.querySelector(".a");
const b = document.querySelector(".b");
const c = document.querySelector(".c");
a.addEventListener("mousedown", () => {
alert("弹出a");
}, false)
b.addEventListener("mousedown", (e) => {
alert("弹出b");
}, true)
c.addEventListener("mousedown", (e) => {
console.log(e)
alert("mousedown2");
}, true)
c.addEventListener("mousedown", (e) => {
alert("mousedown1");
}, false)
c.addEventListener("mousedown", (e) => {
console.log(e)
alert("mousedown3");
}, false)
c.addEventListener("mousedown", (e) => {
console.log(e)
alert("mousedown4");
}, true)
分析
从HTML来看,嵌套层级是
a>b>c现在来看JS代码
a,b,c都绑定了
mousedown事件,我们仔细看下,这个的执行顺序是怎么样的?我可以在给你们分析一下
对于同一个元素,绑定多个事件,无论是一样的事件,还是不一样的事件,只要是触发了对应事件的监听器,那么它都会执行
那么同一个事件的执行顺序是怎么样的呢?
同一个事件的执行顺序是根据定义的顺序来执行的,前提是useCapture保持一致
当我们点击目标元素时,我们是处于目标阶段的,而不是处于冒泡阶段或者捕获阶段,这一句话请牢牢记住
处于目标阶段时,当useCapture有true,又有false的阶段时
这个时候 我们可以理解为目标元素其实是形成了一个类似于Dom事件模型的东西.
在这个模型内,也有捕获阶段和冒泡阶段.
所以如果有true的话,会先执行捕获阶段,按照定义顺序
然后执行fasle阶段,也就是冒泡阶段,按照事件的定义顺序所以在目标阶段执行的时候,这么多事件的执行顺序就是
mousedown2mousedown4mousedown1mousedown3那么我们现在可以看下这个整个HTML页面,这个执行顺序是什么样的呢?
其实和目标阶段的执行是一样的
非目标元素的useCapture为true时,捕获阶段会先执行事件监听
非目标元素的useCapture为false时,会在捕获阶段和目标阶段执行完毕后,在冒泡阶段执行事件监听
举个例子,如果我在b身上也绑定了多个相同类型的事件,在有true,有false的情况下,它会先执行true的,false的不会等true执行完毕后就立马执行,而是等待目标阶段执行完毕后,才继续执行
大家如果不信的,可以自己去尝试一下所以整体的执行顺序是
bmousedown2mousedown4mousedown1mousedown3a
图解
我怕大家还是不明白我说的是什么意思
所以我画了这张图,把这个过程给大家详细介绍一下
.png)
Spirit带你彻底了解事件捕获和冒泡机制的更多相关文章
- JavaScript 事件(捕获和冒泡 兼容性写法)
事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:on ...
- dom事件不求甚解，色解事件捕获和冒泡
以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...
- javascript事件捕获与冒泡
对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- JS Event事件流（冒泡机制、捕获机制、事件绑定）
1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...
- js事件捕获和冒泡解析
<div id="box"> <div id="box2"> <p id="test">test< ...
- JS中的事件、事件冒泡和事件捕获、事件委托
https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...
- JavaScript高级程序设计笔记 事件冒泡和事件捕获
1.事件冒泡 要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body> <div> click me! </div> & ...
- js之事件冒泡和事件捕获介绍
链接:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. (2)捕获型事件 ...
随机推荐
- .NetCore+Envoy+Id4+Dapr+EFCore 构建微服务之Envoy
.NetCore比较流行的微服务应该时是用Ocelot的方式构建微服务,纯配置化,开发量也比较小.但是做过一些项目之后发现这个方式不是很适合,首先它比较笨重,其次不支持gRpc和webSocket通信 ...
- BBPlayerView
GitHub 仓库地址 一个高度封装的视频播放器视图,基于 AVPlayer.AVPlayerLayer.AVPlayerItem. 继承自 UIView,可以当做一般视图使用,适用于 Swift 和 ...
- Nacos 笔记
Nacos 笔记 目录 Nacos 笔记 1. Nacos简介 1.1 主流配置中心对比 1.2 主流注册中心对比 1.3 Nacos特性 2. 安装启动 支持外部 MySQL 3. 配置管理 3.1 ...
- 四、C#简单操作MinIO
MinIO的官方网站非常详细,以下只是本人学习过程的整理 一.MinIO的基本概念 二.Windows安装与简单使用MinIO 三.Linux部署MinIO分布式集群 四.C#简单操作MinIO He ...
- JavaGUI画笔工具的使用
JavaGUI画笔工具的使用 package GUI; import java.awt.*; public class TestPaint { public static void main(Stri ...
- HCNA Routing&Switching之STP端口状态、计时器以及拓扑变化
前文我们了解了STP选举规则相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15131999.html:今天我们来聊一聊STP的端口状态.计时器.端口状 ...
- JVM学习笔记-第六章-类文件结构
JVM学习笔记-第六章-类文件结构 6.3 Class类文件的结构 本章中,笔者只是通俗地将任意一个有效的类或接口锁应当满足的格式称为"Class文件格式",实际上它完全不需要以磁 ...
- Ubuntu上安装gevent
安装libevent; 安装greenlet: sudo easy_install gevent (need net access) bingo! -> python-dev -> lib ...
- java.lang.instrument.Instrumentation
java.lang.instrument.Instrumentation 看完文档之后,我们发现这么两个接口:redefineClasses和retransformClasses.一个是重新定义cla ...
- Shell-06-正则表达式
正则表达式 shell正则表达式分为两种 基础正则表达式:BRE 扩展正则表达式:ERE,扩展的表达式有 + .? .| 和 () 元字符表 * 匹配0次或多次 更多请查看相关网站 http://ww ...