当前位置： 首页 > news >正文

事件捕获vs 事件冒泡，延申事件委托

news 文章来源：https://blog.csdn.net/YuuuPeeiiiii/article/details/143486740 2025/5/18 6:31:57

事件捕获vs事件冒泡

  • 拿点击事件举例子，点击dom树的某个目标节点：
    • 事件捕获：从根节点到目标节点扩散
    • 事件冒泡：从目标节点到根节点扩散
  • 扩散就是说，途中的节点，相应的点击事件都会被触发
    但是，只能，拦截其中一个方向，也就是，要么，在捕获阶段拦截，要么在冒泡阶段拦截。
    target.addEventListener(eventType,hander,useCapture);第三个参数，useCapture，是否在捕获阶段触发。true就是在捕获阶段触发，false就是在冒泡极端触发
<body><div class="parent"><div class="child1">child1<div class="grandson1">grandson1</div></div><div class="child2">child2</div></div>
</body>

<script>let child1=document.getElementsByClassName('child1')[0];let grandson1=document.getElementsByClassName('grandson1')[0];child1.addEventListener('click',function(event){console.log(this,event.target)})grandson1.addEventListener('click',function(event){console.log('grandson1',event,this)})
</script>

只简单分析dom对象
在这里插入图片描述
假设点击，grandson1,捕获阶段，就是从parent->child1->grandson1;冒泡阶段，就是grandson1->child1->parent
这三个节点，要么，你在捕获阶段监听，

    child1.addEventListener('click',function(event){console.log(this,event.target)}，true)

要么在，冒泡阶段监听

    child1.addEventListener('click',function(event){console.log(this,event.target)})

事件委托

其实就是把某个元素的事件，委托给祖先元素。
在这里插入图片描述
就比如，child1下面有很多节点，如果对每个节点都监听click事件的化，会造成资源浪费，代码也冗余，所以一般可以，在冒泡阶段拦截，用event.target获取点击的元素。

    let child1=document.getElementsByClassName('child1')[0];let grandson1=document.getElementsByClassName('grandson1')[0];child1.addEventListener('click',function(event){let t=event.targetif(t===this){console.log('clicked child1,noting to do');return;}// 有可能grandson里面还有元素，业务上一般需要，获取grandson这一层while(t&&t!==this){if(t.parentNode===this){break}t=t.parentNode;}// do something...console.log(t.innerText,'triggered')});
  • 为什么要对t===this做判断？用户可能点击的是代理层，也就是child1;
  • 为什么要while，因为有可能grandsonN中有其他子元素，但一般我们需要获取的是grandsonN这一层的信息，所以需要循环到gransonN这一层
  • 为什么要用t=event.target，你是改不了event.target滴~

stopPropagation vs preventDefault

区别
stopPropagation阻止冒泡事件
preventDefault阻止默认事件。e.g. 点击a标签会跳转到href，点击form buttom会提交表单

    <div class="parent"><div class="child1">child1<div class="grandson1">grandson1</div></div><div class="child2">child2</div></div>

    let child1=document.getElementsByClassName('child1')[0];let grandson1=document.getElementsByClassName('grandson1')[0];let parent=document.getElementsByClassName('parent')[0];child1.addEventListener('click',function(event){let t=event.targetif(t===this){console.log('clicked child1,noting to do');return;}// 有可能grandson里面还有元素，业务上一般需要，获取grandson这一层while(t&&t!==this){if(t.parentNode===this){break}t=t.parentNode;}// do something...console.log(t.innerText,'triggered');console.log("current target",event.currentTarget);event.stopPropagation(); //  preventDefault是拦截不住的，因为冒泡不是默认事件console.log("stopped propagations") // 停止冒泡，不会往上传到parent了});parent.addEventListener('click',function(event){console.log("on parent click")})

pointer-event

css有一个属性是pointer-events 控制鼠标事件
某个元素设置成pointer-events:none，那么元素不会响应鼠标事件，显然，在上面例子中，如果我把 grandson1的样式设置成这个，点击grandson1 不会输出on grandson1 click。但是，会输出on child1 click，on parent click，也就是只是当前元素，不会相应鼠标事件而已（click，mouseover…)，但是事件还是会扩散。如果设置为auto，那就相当于没有设置pointer-events这个属性，正常触发。

    <div class="parent"><div class="child1">child1<div class="grandson1 disabled">grandson1</div></div><div class="child2">child2</div></div>

    .disabled{pointer-events: auto;/* cursor只是改变了样式，还是会触发事件的 *//* cursor:not-allowed;  */}

    let child1=document.getElementsByClassName('child1')[0];let grandson1=document.getElementsByClassName('grandson1')[0];let parent=document.getElementsByClassName('parent')[0];grandson1.addEventListener('click',function(event){console.log('on grandson1 click') });child1.addEventListener('click',function(event){console.log('on child1 click')});parent.addEventListener('click',function(event){console.log("on parent click")})

输出：
在这里插入图片描述

相关文章：

事件捕获vs 事件冒泡，延申事件委托

事件捕获vs事件冒泡 拿点击事件举例子&#xff0c;点击dom树的某个目标节点&#xff1a; 事件捕获&#xff1a;从根节点到目标节点扩散事件冒泡&#xff1a;从目标节点到根节点扩散 扩散就是说&#xff0c;途中的节点&#xff0c;相应的点击事件都会被触发 但是&#xff0c;只…...

编程日记 2024/11/6 2:02:09

接口测试（十一）jmeter——断言

一、jmeter断言 添加【响应断言】 添加断言 运行后&#xff0c;在【察看结果树】中可得到&#xff0c;响应结果与断言不一致&#xff0c;就会红色标记...

编程日记 2024/11/6 1:58:05

使用buildx构建多架构平台镜像

1. 查看buildx插件信息 比较新的docker-ce版本默认已经集成了buildx插件 [rootdocker ~]# docker buildx version github.com/docker/buildx v0.11.2 9872040 [rootdocker ~]#2. 增加多平台镜像构建支持 通过tonistiigi/binfmt:latest初始化一个基于容器的构建环境&#xff…...

编程日记 2024/11/6 1:56:03

宠物领养救助管理软件有哪些功能 佳易王宠物领养救助管理系统使用操作教程

一、概述 佳易王宠物领养救助管理系统V16.0&#xff0c;集宠物信息登记、查询&#xff0c;宠物领养登记、查询&#xff0c; 宠物领养预约管理、货品进出库库存管理于一体的综合管理系统软件。 概述&#xff1a; 佳易王宠物领养救助管理系统V16.0&#xff0c;集宠物信息登记…...

编程日记 2024/11/6 1:54:01

Spring Boot中实现多数据源连接和切换的方案

Spring Boot中实现多数据源连接和切换的方案 在Spring Boot项目中&#xff0c;随着业务需求的增长&#xff0c;我们往往需要连接多个数据库&#xff0c;即实现多数据源连接和切换。这种需求可能源于数据库的读写分离、微服务架构下的服务拆分、数据分库分表等场景。本文将详细…...

编程日记 2024/11/6 1:53:00

科技资讯|谷歌Play应用商店有望支持 XR 头显，AR / VR设备有望得到发展

据 Android Authority 报道&#xff0c;谷歌似乎正在为其 Play 商店增加对 XR 头显的支持。该媒体在 Play 商店的代码中发现了相关的线索&#xff0c;包括一个代表头显的小图标以及对“XR 头显”的提及。 谷歌也可能改变了此前拒绝将 Play 商店引入 Meta Quest 头显的决定。今…...

编程日记 2024/11/6 1:50:58

关于read/write 网络IO、硬盘IO的区别

对于read/write API&#xff0c;在数据在不超过指定的长度的时候有多少读多少&#xff0c;没有数据则会一直等待。 因此&#xff0c;对于网络IO&#xff0c;由于我们无法知道网络对面什么时候准备好数据&#xff0c;什么时候发起数据。所以使用read/write的话&#xff0c;可能…...

编程日记 2024/11/6 1:47:55

vue2开发 对接后端（go语言）常抛异常情况以及处理方法汇总

背景 在Vue2开发中&#xff0c;与后端&#xff08;Go语言&#xff09;接口对接时出现异常通常是由于前后端之间的数据交互出现了问题。常见的异常包括数据格式不匹配、请求方法不匹配、请求头部信息错误、跨域请求问题等。 常见异常 如出现报错提示&#xff1a; json : can…...

编程日记 2024/11/6 1:46:53

LSTM：解决梯度消失与长期依赖问题

LSTM&#xff1a;解决梯度消失与长期依赖问题 长短期记忆网络&#xff08;LSTM&#xff09;是一种特殊类型的递归神经网络&#xff08;RNN&#xff09;&#xff0c;设计用来克服标准RNN在处理长序列数据时遇到的梯度消失问题。下面是对您提供的LSTM特性描述的详细解释&#xf…...

编程日记 2024/11/6 1:45:52

Kafka在大数据处理中的作用及其工作原理

Kafka在大数据处理中扮演着至关重要的角色&#xff0c;其作用及工作原理可以从以下几个方面进行解释&#xff1a; 一、Kafka的作用 消息队列&#xff1a; Kafka作为一个高性能、高可伸缩性的消息队列&#xff0c;能够有效地解耦数据生产者和消费者之间的关系&#xff0c;实现…...

编程日记 2024/11/6 1:40:44

w~自动驾驶~合集5

我自己的原文哦~ https://blog.51cto.com/whaosoft/12304427 # 智能驾驶仿真测试的『虚幻』与『真实』 先给大家讲个故事&#xff1a;某主机厂计划构建一套智能驾驶仿真环境&#xff0c;但需同时满足“对外展示”和“项目使用”两方面需求&#xff0c;与供应商商讨一个月后&…...

编程日记 2024/11/6 1:39:43

Java优先队列的使用

1. 优先队列的定义 PriorityQueue继承了Queue接口&#xff0c;底层默认是一个小根堆。 PriorityQueue<Integer> queuenew PriorityQueue<>(); 2. 常用方法 方法描述boolean offer(E e)入队列E poll()出队列E peek()得到队首元素 int size() 返回集合中的元素个…...

编程日记 2024/11/6 1:37:41

20241105，LeetCode 每日一题，用 Go 实现两数之和的非暴力解法

题目 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案&#xff0c;并且你不能使用两次相同的元素。 你可以按任意顺序返回答案。 …...

编程日记 2024/11/6 1:36:40

mysql之命令行基础指令

一&#xff1a;安装好mysql后&#xff0c;注册好账号密码。 二&#xff1a;在命令行进行登录的指令如下 mysql -u用户名 -p 例如&#xff1a;mysql -uroot -p; 然后按下回车&#xff0c;进入输入密码。 三&#xff1a;基本指令&#xff1a; 1&#xff1a;查看当前账户的所有…...

编程日记 2024/11/6 1:35:38

使用Django Channels实现WebSocket实时通信

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Django Channels实现WebSocket实时通信 Django Channels 简介 环境搭建 安装 Django 和 Channels 创建 Django 项目 配置 A…...

编程日记 2024/11/6 1:33:35

「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用

本篇将带领你实现一个趣味十足的互动应用&#xff0c;用户点击按钮时猫会在一排灯之间移动&#xff0c;猫所在的位置灯会亮起&#xff08;on&#xff09;&#xff0c;其余灯会熄灭&#xff08;off&#xff09;。应用会根据用户的操作动态更新灯光状态和文本提示当前亮灯的位置&…...

编程日记 2024/11/6 1:32:34

Spring-Day4

12.HelloSpring <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns:util"http://www.springframework…...

编程日记 2024/11/6 1:31:32

C#-类：成员属性

数据成员 ≠ 属性 成员属性 属性可以理解为一种封装 成员属性概念&#xff1a;一般是用来保护成员变量的 成员属性的使用和变量一样&#xff0c;外部用对象点出 get中需要return内容 &#xff1b; set中用value表示传入的内容 get和set语句块中可以加逻辑处理。应用&#…...

编程日记 2024/11/6 1:29:31

qt QDragEnterEvent详解

1、概述 QDragEnterEvent是Qt框架中用于处理拖放进入事件的一个类。当用户将一个拖拽对象&#xff08;如文件、文本或其他数据&#xff09;拖动到支持拖放操作的窗口部件&#xff08;widget&#xff09;上时&#xff0c;系统会触发QDragEnterEvent事件。这个类允许开发者在拖拽…...

编程日记 2024/11/6 1:28:30

Vue项目与IE浏览器的兼容性分析(Vue|ElementUI)

总体分析 Vue.js的兼容性在不同版本间有所差异&#xff0c;具体针对IE浏览器的推荐版本如下&#xff1a; Vue 2.x 官方支持&#xff1a;Vue 2.x版本官方宣布支持IE9及以上版本的IE浏览器。限制与Polyfill&#xff1a;虽然Vue 2.x支持IE9及以上版本&#xff0c;但在使用时可能…...

编程日记 2024/11/6 1:27:29

【C++之STL】一文学会使用 string

文章目录 1. STL导读1. 1 什么是STL1. 2 STL的版本1. 3 STL六大组件1. 4 STL的重要性1. 5 STL的学习1. 6 STL系列博客的规划 2. string2. 1 为什么学习string类?2. 2 标准库中的string2. 3 基本构造2. 4 尾插与输出运算符重载2. 5 构造函数2. 6 赋值运算符重载2. 7 容量操作2.…...

编程日记 2024/11/6 1:25:26

好用的办公套件--- ONLYOFFICE

目录 引言 UI界面 ONLYOFFICE 协作空间 使用协作空间三步走 一、注册与登录 二、创建房间 三、上传与编辑文档 ONLYOFFICE协作空间的安全性 ONLYOFFICE 文档 关于 ONLYOFFICE 引言 ONLYOFFICE 桌面编辑器 ONLYOFFICE是一款功能全面的办公套件&#xff0c;支持文档、表…...

编程日记 2024/11/6 1:24:25

Android View事件分发

目录 1.什么是View事件分发&#xff1f; 2.事件的类型 3.事件的发生 4.事件分发的方法 4.1 dispatchTouchEvent() 4.2 onTouchEvent() 4.3 onInterceptTouchEvent() 5.滑动冲突 5.1 外部拦截法 5.2内部拦截法 6.onTouch的执行高于onClick 7. onTouch()和onTouchEve…...

编程日记 2024/11/6 1:22:24

攻防世界GFSJ1229 Three

​ 题目编号&#xff1a;GFSJ1229 解题过程 1. 附件下载是三个压缩包A.zip B.zip C.zip和一个python程序Three.py 2. A.zip可以直接解压出来&#xff0c;内容如下: 2022-08-27 20:16:04.246131 Func A0*X0B0 2022-08-27 20:16:05.116859 Read_Data A0.txt->A0(28829613228…...

编程日记 2024/11/6 1:20:22

2023 icpc杭州（M,J,D,G,H）

文章目录 [M. V-Diagram](https://codeforces.com/gym/104976/problem/M)[J. Mysterious Tree](https://codeforces.com/gym/104976/problem/J)[D.Operator Precedence](https://codeforces.com/gym/104976/problem/D)[G. Snake Move](https://codeforces.com/gym/104976/probl…...

编程日记 2024/11/6 1:18:20

在CentOS 7上安装Alist

在CentOS 7上安装Alist 的步骤如下&#xff1a; 1. 卸载旧版本 如果你之前安装过旧版本的Docker&#xff0c;可以先卸载它&#xff1a; sudo yum remove docker docker-common docker-snapshot docker-engine2. 安装依赖包 确保你的系统是最新的&#xff0c;并安装必要的依…...

编程日记 2024/11/6 1:17:19

【C/C++】memcpy函数的模拟实现

零.导言 上一篇博客我们学习了memcpy函数&#xff0c;不妨我们现在尝试模拟实现memcpy函数的功能。 一.实现memcpy函数的要点 memcpy函数是一种C语言内存函数&#xff0c;可以按字节拷贝任意类型的数组&#xff0c;因此我们自定义的模拟函数需要两个无类型的指针参数&#xff…...

编程日记 2024/11/6 1:15:17

嵌入式开发之线程互斥

目录 互斥锁初始化-pthread_mutex_init 申请锁-pthread_mutex_lock 释放锁-pthread_mutex_unlock 同步 VS 互斥 临界资源：一次只允许一个任务（进程、线程）访问的共享资源，不允许多个任务同时访问的。 临界区：访问临界区的代码 互斥机制：mutex互斥锁，任务访问临界资…...

编程日记 2024/11/6 1:12:14

JavaScript 变量作用域与函数调用机制：var 示例详解

JavaScript 变量作用域与函数调用机制&#xff1a;var 示例详解 在 JavaScript 中&#xff0c;作用域和闭包是理解变量生命周期和行为的核心概念。通过以下这段代码&#xff0c;我们将详细分析如何在不同的作用域内使用 var 关键字&#xff0c;并解释相关的变量访问规则 代码解…...

编程日记 2024/11/6 1:10:10

Linux（CentOS）安装 JDK

1、下载 JDK 官网&#xff1a;https://www.oracle.com/ 2、上传 JDK 文件到 CentOS&#xff0c;使用FinalShell远程登录工具&#xff0c;并且使用 root 用户登录 3、解压 JDK 创建目录 /export/server mkdir -p /export/server 解压到目录 /export/server tar -zxvf jdk-17…...

编程日记 2024/11/6 1:08:07