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)

分析

  1. 从HTML来看,嵌套层级是 a>b>c

  2. 现在来看JS代码

  3. a,b,c都绑定了mousedown事件,我们仔细看下,这个的执行顺序是怎么样的?

  4. 我可以在给你们分析一下

  5. 对于同一个元素,绑定多个事件,无论是一样的事件,还是不一样的事件,只要是触发了对应事件的监听器,那么它都会执行

  6. 那么同一个事件的执行顺序是怎么样的呢?

  7. 同一个事件的执行顺序是根据定义的顺序来执行的,前提是useCapture保持一致

  8. 当我们点击目标元素时,我们是处于目标阶段的,而不是处于冒泡阶段或者捕获阶段,这一句话请牢牢记住

  9. 处于目标阶段时,当useCapture有true,又有false的阶段时

    这个时候 我们可以理解为目标元素其实是形成了一个类似于Dom事件模型的东西.

    在这个模型内,也有捕获阶段和冒泡阶段.

    所以如果有true的话,会先执行捕获阶段,按照定义顺序

    然后执行fasle阶段,也就是冒泡阶段,按照事件的定义顺序

  10. 所以在目标阶段执行的时候,这么多事件的执行顺序就是 mousedown2 mousedown4 mousedown1 mousedown3

  11. 那么我们现在可以看下这个整个HTML页面,这个执行顺序是什么样的呢?

  12. 其实和目标阶段的执行是一样的

    非目标元素的useCapture为true时,捕获阶段会先执行事件监听

    非目标元素的useCapture为false时,会在捕获阶段和目标阶段执行完毕后,在冒泡阶段执行事件监听

    举个例子,如果我在b身上也绑定了多个相同类型的事件,在有true,有false的情况下,它会先执行true的,false的不会等true执行完毕后就立马执行,而是等待目标阶段执行完毕后,才继续执行

    大家如果不信的,可以自己去尝试一下

  13. 所以整体的执行顺序是

    b mousedown2 mousedown4 mousedown1 mousedown3 a

图解

我怕大家还是不明白我说的是什么意思

所以我画了这张图,把这个过程给大家详细介绍一下

Spirit带你彻底了解事件捕获和冒泡机制的更多相关文章

  1. JavaScript 事件(捕获和冒泡 兼容性写法)

    事件    浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:on ...

  2. dom事件不求甚解，色解事件捕获和冒泡

    以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...

  3. javascript事件捕获与冒泡

    对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...

  4. js中addEventListener第三个参数涉及到的事件捕获与冒泡

    js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...

  5. JS Event事件流（冒泡机制、捕获机制、事件绑定）

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

  6. js事件捕获和冒泡解析

    <div id="box"> <div id="box2"> <p id="test">test< ...

  7. JS中的事件、事件冒泡和事件捕获、事件委托

    https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...

  8. JavaScript高级程序设计笔记 事件冒泡和事件捕获

    1.事件冒泡 要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body> <div> click me! </div> & ...

  9. js之事件冒泡和事件捕获介绍

    链接:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. (2)捕获型事件 ...

随机推荐

  1. OpenGL学习笔记（六）坐标系统

    目录 一.衔接 二.概述 三.各个坐标系统 局部空间 世界空间 观察空间 裁剪空间 四.两种投影矩阵 正射投影 透视投影 五.把它们都组合到一起 六.编码实现 1. 实现卡片旋转 2. 实现正方体旋转 ...

  2. MapReduce框架原理-Writable序列化

    序列化和反序列化 序列化就是把内存中的对象,转换成字节序列(或其他数据传输协议)以便于存储(持久化)和网络传输. 反序列化就是将收到字节序列(或其他数据传输协议)或者是硬盘的持久化数据,转换成内存中的 ...

  3. 05.表达式目录树Expression

    参考文章 https://www.cnblogs.com/xyh9039/p/12748983.html 1. 基本了解 1.1 Lambda表达式 演变过程 using System; namesp ...

  4. MySQL：JDBC批量插入数据的效率

    平时使用mysql插入.查询数据都没有注意过效率,今天在for循环中使用JDBC插入1000条数据居然等待了一会儿 就来探索一下JDBC的批量插入语句对效率的提高 首先进行建表 create tabl ...

  5. Notes of Cygwin in Windows7

    Installation download setup.exe from its official website; run setup.exe, select "download with ...

  6. ffmpeg第6篇：滤镜语法

    前言 哈哈,回来继续填坑了,前段时间较忙没时间写,现在继续~ 简介 滤镜是ffmpeg的一个很强大的功能,它支持许多有用的视频处理功能,常见的滤镜如:缩放.旋转.水印.裁剪等 一个比较经典的滤镜使用方 ...

  7. mysqldump备份总结

    常用的备份参数 -A 备份全库 -B 备某一个数据库下的所有表 -R, --routines 备份存储过程和函数数据 --triggers 备份触发器数据 --master-data={1|2} 告诉 ...

  8. SQL server多表联合查询

    参考网址: https://blog.csdn.net/zou15093087438/article/details/79226394 1. 外连接可分为:左连接.右连接.完全外连接. a.  左连接 ...

  9. C#中的几种锁：用户模式锁、内核模式锁、动态计数、监视锁

    参考网址: https://blog.csdn.net/weixin_43989331/article/details/105356008 C#中的几种锁:用户模式锁.内核模式锁.动态计数.监视锁介绍 ...

  10. C++类的构造函数后面加一个冒号的含义

    最近在看侯捷老师讲解的C++知识,他讲到在构造函数加一个冒号初始化值的方法,会使代码更大气,在此记录一下使用方法 构造函数冒号后的初始化class complex{public: complex(do ...