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. 为什么npm install 经常失败

    Hello 您好,我是大粽子.深耕线上商城的攻城狮(程序员)一枚. 前言 这段时间真的是忙,最近能抽时间搞搞大家在自己环境中遇到的各种问题了,我呢就是见不得我的代码在你的电脑运行不起来的.就像姜子牙睡 ...

  2. CYPEESS USB3.0程序解读之---SPI读写

    前面已经解读了GPIO以及同步FIFO操作,下面我们看一个SPI读写的例子,它是主程序命令从SPI中读写一些数据. SPI传输子程序看一下: 页地址,字节计数,缓冲区,读写标志 因为只能一页一页的读或 ...

  3. Java ArrayList【笔记】

    Java ArrayList[笔记] ArrayList ArrayList基本结构 ArrayList 整体架构比较简单,就是一个数组结构 源码中的基本概念 index 表示数组的下标,从 0 开始 ...

  4. 带你读AI论文丨用于目标检测的高斯检测框与ProbIoU

    摘要:本文解读了<Gaussian Bounding Boxes and Probabilistic Intersection-over-Union for Object Detection&g ...

  5. 题解 [NOIP2017 提高组]宝藏

    传送门 这是蓝书上状压的例题啊,怎么会出现在模拟赛里 不过就算原题我也没把握写对 核心思路: 先令\(dp[s]\)为当前状态为\(s\)时的总花费最小值,\(cnt[s][i]\)为这个方案中由根节 ...

  6. kivy之CheckBox属性实操学习

    checkbox部件属性不多,本练习举例了单选,复选二种方式,并将各checkbox进行id命名,每个都绑定了相同的动作,具体大家可以看源码进行学习. 先在开发工具pycharm里新建一个项目,然后新 ...

  7. mpvue学习笔记

    坑一: 挂载在Vue.prototype上的属性,在模板语法里面是undefined,必须经过computed计算过一下才能用. 坑二: 关于生命周期钩子 因为小程序的历史页面不会销毁,所以在生命周期 ...

  8. 字符串匹配--Regex

    利用Regix实现字符串匹配 Eg:匹配嵌入到[]中的字符 string pattern = Regex.Escape("[") + "(.*?)]"; str ...

  9. ArcGIS地形分析--TIN及DEM的生成，TIN的显示

    DEM是对地形地貌的一种离散的数字表达,是对地面特性进行空间描述的一种数字方法.途径,它的应用可遍及整个地学领域.通过对本次实习的学习,我们应加深对TIN建立过程的原理.方法的认识:熟练掌握ArcGI ...

  10. 【C#】Enum，Int，String的互相转换 枚举转换

    Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基 ...