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. 06.I/O操作

    参考文章 https://www.cnblogs.com/xuwenfeng/articles/2238127.html 1. 驱动器操作 在Windows操作系统中,存储介质统称为驱动器,硬盘由于可 ...

  2. system V信号量和Posix信号量

    一.函数上的区别 信号量有两种实现:传统的System V信号量和新的POSIX信号量.它们所提供的函数很容易被区分:对于所有System V信号量函数,在它们的名字里面没有下划线.例如,应该是sem ...

  3. SortCompare.time的反射版本

    "Algorithms" by Robert Sedgewick, p256, SortCompare.time(): public static double time(Stri ...

  4. 【笔记】特征脸（PCA在人脸识别领域的应用）

    人脸识别与特征脸(简单介绍) 什么是特征脸 特征脸(Eigenface)是指用于机器视觉领域中的人脸识别问题的一组特征向量,该方法被认为是第一种有效的人脸识别方法. PCA的具体实现思想见 [笔记]主 ...

  5. Linux UDP服务器编程

    UDP主要使用sendto()和recvfrom() recvfrom() 函数原型如下: #include <sys/types.h> #include <sys/socket.h ...

  6. Django CBV装饰器 中间件 auth模块 CSRF跨站请求

    CBV添加装饰器 给CBV添加装饰器有三种方法,三种方法都需要导入模块: from django.utils.decorators import method_decorator 第一种直接在方法上面 ...

  7. 【网络编程】TCPIP-7-域名与网络地址

    目录 前言 7. 域名与网络地址 7.1 IP 7.2 域名 7.3 DNS 7.4 IP地址与域名之间的转换 7.4.1 利用域名获取IP地址 7.4.2 利用IP地址获取域名 7.4.3 升级版的 ...

  8. Linux-常见报错注释

    1. command not found 命令没有找到 2. No such file or directory         没有这个文件或目录 3. Permission denied     ...

  9. SpringBoot JPA查询映射到自定义实体类

    和 SegmentFault上的文章(https://segmentfault.com/a/1190000021869465)一样, 都是俺账号 场景 举一个简单的栗子: 比如有一个User实体类 @ ...

  10. java小白困惑的那些事

    刚接触java时,有些技术盲区,查了很多资料也得不到答案,面试时也得遮遮掩掩,这里就列举一些,当年踩过的那些坑 1.http -> https一个网站或接口,从http改到https是否需要额外 ...