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

谈谈对JavaScript 中的事件冒泡（Event Bubbling）和事件捕获（Event Capturing）的理解

article 2026/5/14 8:38:52

JavaScript 中的事件冒泡（Event Bubbling）和事件捕获（Event Capturing），是浏览器在处理事件时采用的两种机制，它们在事件的传播顺序上有显著区别。这两种机制帮助开发者在事件触发时，能够以不同的方式捕获和处理事件。

注意： 要想在冒泡和捕获阶段触发事件，首先要在想要触发事件的dom上绑定事件

1. 事件冒泡（Event Bubbling）

定义： 事件冒泡是指当一个事件被触发时，它会从事件触发的元素（目标元素）开始，逐层向上传播到 DOM 树的根元素（通常是 document 或 window）。

传播顺序：
事件目标元素 -> 父元素 -> 父元素的父元素 -> … -> document -> window

使用场景：

父子元素的事件代理：当父元素绑定事件时，子元素的事件会“冒泡”到父元素，可以通过父元素来统一管理子元素的事件。
事件委托：在很多情况下，我们并不想为每个子元素都绑定事件，而是可以将事件绑定到父元素上，利用事件冒泡的特性来处理子元素的事件。

代码示例：事件冒泡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件冒泡示例</title>
</head>
<body><div id="parent" style="width: 300px; height: 300px; background-color: lightblue;"><button id="child">Click Me</button></div><script>document.getElementById("parent").addEventListener("click", function () {alert("Parent clicked");});document.getElementById("child").addEventListener("click", function () {alert("Child clicked");});</script>
</body>
</html>

行为解释：

当点击按钮（子元素）时，先触发按钮的 click 事件，显示“Child clicked”。
然后，事件会冒泡到父元素 div，触发父元素的 click 事件，显示“Parent clicked”。

输出顺序：

“Child clicked”
“Parent clicked”

2. 事件捕获（Event Capturing）

定义： 事件捕获与冒泡相反，是指事件从根元素开始，逐层向下传播，直到触发事件的目标元素。

传播顺序：
window -> document -> 祖父元素 -> 父元素 -> 目标元素

使用场景：

精确控制事件处理的顺序：当需要在事件到达目标元素之前就进行干预时，可以使用事件捕获。
用于某些特殊的交互设计：例如，在父元素捕获事件之前阻止事件的冒泡行为。

代码示例：事件捕获

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件捕获示例</title>
</head>
<body><div id="parent" style="width: 300px; height: 300px; background-color: lightblue;"><button id="child">Click Me</button></div><script>document.getElementById("parent").addEventListener("click", function () {alert("Parent clicked (Capture)");}, true);  // 注意，第三个参数设置为true表示使用捕获document.getElementById("child").addEventListener("click", function () {alert("Child clicked");});</script>
</body>
</html>

行为解释：

当点击按钮时，事件首先触发父元素 div 的 click 事件（因为它在捕获阶段）。显示“Parent clicked (Capture)”。
然后，事件会传播到按钮元素，显示“Child clicked”。

输出顺序：

“Parent clicked (Capture)”
“Child clicked”

3. 事件的默认顺序和使用 `stopPropagation` 和 `preventDefault`

stopPropagation()：阻止事件的进一步传播。它可以防止事件在冒泡或捕获阶段继续传播。
preventDefault()：阻止事件的默认行为，比如点击链接时不跳转，表单提交时不刷新页面。

示例：`stopPropagation()` 和 `preventDefault()`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件传播控制</title>
</head>
<body><div id="parent" style="width: 300px; height: 300px; background-color: lightblue;"><button id="child">Click Me</button></div><script>document.getElementById("parent").addEventListener("click", function () {alert("Parent clicked");});document.getElementById("child").addEventListener("click", function (event) {alert("Child clicked");event.stopPropagation(); // 阻止事件冒泡});</script>
</body>
</html>

行为解释：

当点击按钮时，会触发按钮的 click 事件，显示“Child clicked”。
stopPropagation() 阻止事件继续冒泡到父元素，所以父元素的 click 事件不会被触发。

输出顺序：

“Child clicked”（父元素的点击事件被阻止）

4. 总结与应用

事件冒泡：是默认的事件传播方式。适用于事件委托（父元素处理多个子元素的事件）。
事件捕获：可以在事件到达目标元素之前处理事件，适用于需要优先处理事件的场景。
stopPropagation() 和 preventDefault()：可以控制事件的传播和默认行为，提供更高的灵活性。

这些机制可以结合使用，使你能够在复杂的用户交互中进行精准的事件管理。

谈谈对JavaScript 中的事件冒泡（Event Bubbling）和事件捕获（Event Capturing）的理解

JavaScript 中的事件冒泡（Event Bubbling）和事件捕获（Event Capturing），是浏览器在处理事件时采用的两种机制，它们在事件的传播顺序上有显著区别。这两种机制帮助开发者在事件触发时，能够以不同…...

编程日记 2025/8/6 1:41:00

cherry USB 键盘分析

文章目录 cherry USB 键盘分析描述符结构设备描述符配置描述符集合配置描述符接口 1 描述符HID 描述符端点 IN 描述符接口 2 描述符HID 描述符端点 IN 描述符端点 OUT 描述符字符串描述符语言 ID (字符串索引为 0)厂商字符串(字符串索引为 1)产品字符串(字符串索引为 2)HID 报告…...

编程日记 2026/5/2 22:52:12

IPoIB（IP over InfiniBand）数据接收与发送机制详解

IPoIB（IP over InfiniBand）是一种在InfiniBand网络上实现IP协议的技术，它允许在InfiniBand网络上传输IP数据包。IPoIB通过将IP数据包封装在InfiniBand的数据包中，实现了在InfiniBand网络上的高效通信。本文将详细分析IPoIB如何接收…...

编程日记 2026/5/14 2:11:40

Spring Boot - 数据库集成04 - 集成Redis

Spring boot集成Redis 文章目录 Spring boot集成Redis一：redis基本集成1：RedisTemplate Jedis1.1：RedisTemplate1.2：实现案例1.2.1：依赖引入和属性配置1.2.2：redisConfig配置1.2.3：基础使用 2&…...

编程日记 2026/5/3 0:24:39

JAVAweb学习日记（八）请数据库模型MySQL

一、MySQL数据模型二、SQL语言三、DDL 详细见SQL学习日记内容四、DQL-条件查询五、DQL-分组查询聚合函数： 分组查询： 六、DQL-分组查询七、分页查询八、多表设计-一对多&一对一&多对多一对多-外键： 一对一： 多…...

编程日记 2026/4/20 11:23:02

网易Android开发面试题200道及参考答案（下）

说明原码、反码、补码的概念原码：是一种简单的机器数表示法。对于有符号数，最高位为符号位，0 表示正数，1 表示负数，其余位表示数值的绝对值。比如，对于 8 位二进制数，+5 的原码是 00000101，-5 的原码是 10000101。原码的优点是直观，容易理解，但在进行加减法运算时，…...

编程日记 2026/4/9 16:42:11

16.知识图谱中的本体、实体、属性与关系：区别与联系

文章目录 1. 引言2. 知识图谱的基本概念2.1 本体（Ontology）2.2 实体（Entity）2.3 属性（Attribute）2.4 关系（Relationship） 3. 本体、实体、属性、关系的区别与联系3.1 区别3.2 联系 4…...

编程日记 2026/4/4 10:38:35

Scratch游戏作品 | 僵尸来袭——生存大战，保卫你的领地！

今天为大家推荐一款刺激十足的Scratch射击生存游戏——《僵尸来袭》！在这个充满危机的世界里，僵尸不断向你袭来，利用你的战斗技能与策略道具生存下来，成为最后的幸存者！✨ 源码现已在小虎鲸Scratch资源站免费下载&…...

编程日记 2026/5/14 0:36:07

C# 自定义随机字符串生成

目录简介调用方式： 详细说明 1.外层方法封装 2.定义字符组合 3.按长度生成简介随机字符串，包含数字，字母，特殊符号等，随机拼凑，长度可输入为了生成效率，长度大于1024的&#xff0c…...

编程日记 2026/5/2 5:39:27

【C++探索之路】STL---string

走进C的世界，也意味着我们对编程世界的认知达到另一个维度，如果你学习过C语言，那你绝对会有不一般的收获，感受到C所带来的码云风暴~ ---------------------------------------begin--------------------------------------- 什么是…...

编程日记 2026/5/5 22:17:59

[LeetCode] 字符串 I — 344#反转字符串 | 541#反转字符串II | 54K替换数字

字符串基础知识344# 反转字符串541# 反转字符串II54K 替换数字基础知识字符串的结尾：空终止字符00 char* name "hello"; // 字符串不可拓展（由于是一个固定分配的内存块），有些地方必须加const char name2[5] {h,…...

编程日记 2026/4/4 1:09:59

使用 Docker 运行 Oracle Database 23ai Free 容器镜像并配置密码与数据持久化

使用 Docker 运行 Oracle Database 23ai Free 容器镜像并配置密码与数据持久化前言环境准备运行 Oracle Database 23ai Free 容器基本命令参数说明示例注意事项高级配置参数说明总结前言 Oracle Database 23ai Free 是 Oracle 提供的免费版数据库，基于 Oracle …...

编程日记 2025/11/14 12:36:12

rust 发包到crates.io/ 操作流程（十）

第一步github登录 https://crates.io/ 在项目里面login： cargo login ciol4sMwaR61YvzWniodRlssk6RfS4HcZTU --registry crates-io如果不想每次带这个，就执行 vim ~/.cargo/config.toml 添加下面 [registry] default "crates-io"git a…...

编程日记 2026/5/7 0:21:22

GD32L233RB 驱动数码管

1.数码管有8段A、B、C、D、E、F、G 和 H小数点以及片选信号（DIG） DIG用来选择那一位，A-G 用来显示段静态显示每次只能一次显示单个位动态显示（动态扫描）所有的位显示结束要在10ms左右显示2ms 消光1ms 实…...

编程日记 2026/4/10 0:26:56

MongoDB部署模式

目录单节点模式（Standalone） 副本集模式（Replica Set） 分片集群模式（Sharded Cluster） MongoDB有多种部署模式，可以根据业务需求选择适合的架构和部署方式。单节点模式（Standa…...

编程日记 2026/5/13 6:28:23

国自然重点项目｜代谢影像组学只能预测肺癌靶向耐药的关键技术与应用｜基金申请·25-01-25

小罗碎碎念今天和大家分享一个国自然重点项目，项目执行年限为2019.01 - 2023.12，直接费用为294万。项目聚焦肺癌靶向治疗中药物疗效预测难题，整合多组学与代谢影像数据展开研究。在研究过程中，团队建立动物模型获取多维数据&am…...

编程日记 2026/5/13 7:46:34

NFT Insider #166：Nifty Island 推出 AI Agent Playground；Ronin 推出1000万美元资助计划

引言：NFT Insider 由 NFT 收藏组织 WHALE Members、BeepCrypto 联合出品， 浓缩每周 NFT 新闻，为大家带来关于 NFT 最全面、最新鲜、最有价值的讯息。每期周报将从 NFT 市场数据，艺术新闻类，游戏新闻类，虚拟…...

编程日记 2026/5/5 3:36:20

Word 中实现方框内点击自动打 √ ☑

注： 本文为 “Word 中方框内点击打 √ ☑ / 打 ☒” 相关文章合辑。对第一篇增加了打叉部分，第二篇为第一篇中方法 5 “控件” 实现的详解。在 Word 方框内打 √ 的 6 种技巧 2020-03-09 12:38 使用 Word 制作一些调查表、检查表等，通常…...

编程日记 2026/5/12 6:24:12

GoFrame MongoDB 使用指南 1. 安装依赖 # 安装官方MongoDB驱动 go get -u go.mongodb.org/mongo-driver/mongo go get -u go.mongodb.org/mongo-driver/mongo/options go get -u go.mongodb.org/mongo-driver/bson2. MongoDB 连接示例 package mainimport ("context&qu…...

编程日记 2026/4/29 4:48:14

Cpp::静态动态的类型转换全解析(36)

文章目录前言一、C语言中的类型转换二、为什么C会有四种类型转换？内置类型 -> 自定义类型自定义类型 -> 内置类型自定义类型 -> 自定义类型隐式类型转换的坑三、C强制类型转换static_castreinterpret_castconst_castdynamic_cast 四、RTTI总结前言 Hell…...

编程日记 2026/5/7 2:00:08

4.flask-SQLAlchemy，表Model定义、增删查改操作

介绍 SQLAlchemy是对数据库的一个抽象开发者不用直接与SQL语句打交道 Python对象来操作数据库 SQLAlchemy是一个关系型数据库安装 flask中SQLAlchemy的配置 from flask import Flask from demo.user_oper import userdef create_app():app Flask(__name__)# 使用sessi…...

编程日记 2026/5/6 21:37:25

基于 WEB 开发的手机销售管理系统设计与实现内容

标题:基于 WEB 开发的手机销售管理系统设计与实现内容:1.摘要摘要：随着智能手机的普及和电子商务的快速发展，手机销售行业面临着越来越多的挑战和机遇。为了提高销售效率和管理水平，本文设计并实现了一个基于 WEB 的手机销售管理系统。该系…...

编程日记 2026/1/14 2:31:54

JavaScript 验证 API：全面解析与实战指南

JavaScript 验证 API：全面解析与实战指南引言随着互联网技术的不断发展，前端开发领域的重要性日益凸显。JavaScript 作为前端开发的核心技术之一，其功能性和可扩展性得到了广泛关注。验证功能是JavaScript中不可或缺的一部分，它保证了用户输入数据的正确性和有效性。本…...

编程日记 2026/5/6 20:44:39

20250122-正则表达式

1. 正则标记表示一位字符：\\ 表示指定的一位字符：x 表示任意的一位字符：. 表示任意一位数字：\d 表示任意一位非数字：\D 表示任意一个字母：[a-zA-Z]（大写或小写） 表示任意一个…...

编程日记 2026/5/2 22:46:00

SpringBoot3+Vue3开发学生选课管理系统

功能介绍分三个角色登录：学生登录，老师登录，教务管理员登录，不同用户功能不同！ 1.学生用户功能选课记录，查看选课记录，退选。选课管理，进行选课。通知管理，查看通知消…...

编程日记 2026/5/14 4:36:43

Effective C++ 规则47: 请使用 Traits Class 表现类型信息

1、背景 C 是一种静态类型语言，类型的特性在编译期就可以被识别和操作。为了更好地利用编译期信息来编写高效、灵活、可维护的代码，C 提供了一些技术来“萃取”或“提取”类型的相关信息。即利用 traits 类来封装和提取类型信息，以便在编译期…...

编程日记 2025/8/19 18:02:43

媒体新闻发稿要求有哪些？什么类型的稿件更好通过？

为了保证推送信息的内容质量，大型新闻媒体的审稿要求一向较为严格。尤其在商业推广的过程中，不少企业的宣传稿很难发布在这些大型新闻媒体平台上。媒体新闻发稿要求有哪些？就让我们来了解下哪几类稿件更容易过审。一、媒体新闻发稿要求有哪…...

编程日记 2026/5/6 13:42:40

“AI教学实训系统：打造未来教育的超级引擎

嘿，各位教育界的伙伴们，今天我要跟你们聊聊一个绝对能让你们眼前一亮的教学神器——AI教学实训系统。作为资深产品经理，我可是亲眼见证了这款系统如何颠覆传统教学，成为未来教育的超级引擎。一、什么是AI教学实训系统&#xff1f…...

编程日记 2026/5/5 3:39:40

基于JAVA的微信点餐小程序设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2026/4/29 4:37:26

【2024年华为OD机试】(A卷,200分)- 查找树中元素（JavaScriptJava PythonC/C++）

一、问题描述题目解析题目描述题目要求根据输入的坐标 (x, y) 在树形结构中找到对应节点的内容值。其中： x 表示节点所在的层数，根节点位于第0层，根节点的子节点位于第1层，依此类推。y 表示节点在该层内的相对偏移，从左至右，第一个节点偏移为0，第二个节点偏移为1，…...

编程日记 2026/5/5 3:47:10

1. 事件冒泡（Event Bubbling）

代码示例：事件冒泡

2. 事件捕获（Event Capturing）

代码示例：事件捕获

3. 事件的默认顺序和使用 stopPropagation 和 preventDefault

示例：stopPropagation() 和 preventDefault()

4. 总结与应用

相关文章：

3. 事件的默认顺序和使用 `stopPropagation` 和 `preventDefault`

示例：`stopPropagation()` 和 `preventDefault()`