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. Microservices==>Service Mesh==>Serverless，走马观花

    [0] 始有道 话说图灵开天辟地,冯.诺伊曼造石补天! 始有道道生ML Machine LanguageML生汇编 assembler汇编生编译器 compiler编译器生PL Programming ...

  2. 前端 | Nuxt.js axios baseURL，proxy 代理

    平时用 Vue 写前端时,对于 axios 请求的常规操作一般是 统一定义好一个 axios 对象,使用 axios.defaults.baseURL 设置 baseURL 也不是不能直接把服务器地址 ...

  3. Docker for windows安装与使用

    1.安装Docker for windows之前,需要将系统的hyper-v功能打开 2.下载Docker for windows进行安装 访问url:https://docs.docker.com/ ...

  4. ElementUi 表单验证失败后 页面滚动到表单验证失败位置

    1.应用场景 当进行长表单验证时 用户填写到了单子的最下面 可是已经滚动过去的部分单子验证失败 为了友好的用户体验 这时候就需要滚动到验证失败位置 2.解决思路 elementUi本身并没有提供相关获 ...

  5. html 去除重复边框

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  6. JVM学习笔记-第七章-虚拟机类加载机制

    JVM学习笔记-第七章-虚拟机类加载机制 7.1 概述 Java虚拟机描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这个过程被 ...

  7. SpringBoot - 集成Auth0 JWT

    目录 前言 session认证与Token认证 session认证 Token认证 JWT简介 JWT定义 JWT数据结构 JWT的类库 具体实现 JWT配置 JWT工具类 测试接口 前言 说说JWT ...

  8. SQL injection：Summary ,Overview and Classification

    What is SQL injection (SQLi)? SQL注入是一种web安全漏洞,让攻击者干扰应用程序对其数据库的查询. 它通常使得攻击者查看他们通常无法检索的数据. 这可能包括属于其他用户 ...

  9. Windows内核开发-6-内核机制 Kernel Mechanisms

    Windows内核开发-6-内核机制 Kernel Mechanisms 一部分Windows的内核机制对于驱动开发很有帮助,还有一部分对于内核理解和调试也很有帮助. Interrupt Reques ...

  10. 当Atlas遇见Flink——Apache Atlas 2.2.0发布！

    距离上次atlas发布新版本已经有一年的时间了,但是这一年元数据管理平台的发展一直没有停止.Datahub,Amundsen等等,都在不断的更新着自己的版本.但是似乎Atlas在元数据管理,数据血缘领 ...