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

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

news 2025/12/15 9:48:03

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/1/26 9:49:56

解读2025年生物医药创新技术：展览会与论坛的重要性

2025生物医药创新技术与应用发展展览会暨论坛，由天津市生物医药行业协会、BIO CHINA生物发酵展组委会携手主办，山东信世会展服务有限公司承办，定于2025年3月3日至5日在济南黄河国际会展中心盛大开幕。展会规模60000平方米、800参展商、35场会…...

编程日记 2025/1/26 9:47:54

【第七天】零基础入门刷题Python-算法篇-数据结构与算法的介绍-一种常见的分治算法（持续更新）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、Python数据结构与算法的详细介绍1.Python中的常用的分治算法2. 分治算法3.详细的分治代码1）一种常见的分治算法总结前言提示：这…...

编程日记 2025/1/26 9:41:39

Spring Data JPA 实战：构建高性能数据访问层

1 简介 1.1 Spring Data JPA 概述 1.1.1 什么是 Spring Data JPA？ Spring Data JPA 是 Spring Data 项目的一部分，旨在简化对基于 JPA 的数据库访问操作。它通过提供一致的编程模型和接口，使得开发者可以更轻松地与关系型数据库进行交互，同时减少了样板代码的编写。Spri…...

编程日记 2025/1/26 9:40:37

Python JSON：深入解析与高效应用

Python JSON：深入解析与高效应用引言 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。Python 作为一种广泛使用的编程语言，对 JSON 的支持非常友好。本文将深入探讨 Python 中 JSON 的处理方法，包括基本操…...

编程日记 2025/1/26 9:39:05

【C语言进阶(四)】指针进阶详解(上)

指针进阶 1. 前言 2. 字符指针 2.1 常量字符串</br>2.2 常量字符串存储的位置</br> 3. 数组指针3.1 数组指针的使用</br> 4. 指针数组 4.1 拓展</br> 5. 数组传参与指针作为参数 5.1 一维数组传参</br> 5.2 二维数组传参</br> 5.3 一级指…...

编程日记 2025/1/26 9:37:54

DDD架构实战第五讲总结：将领域模型转化为代码

云架构师系列课程之DDD架构实战第五讲总结：将领域模型转化为代码一、引言在前几讲中，我们讨论了领域模型的重要性及其在业务分析中的渐进获得方法。本讲将聚焦于如何将领域模型转化为代码，使得开发人员能够更轻松地实现用户的领域模型。二、从模型到代码：领域驱动设计…...

编程日记 2025/1/26 9:35:51

FPGA实现任意角度视频旋转（完结）视频任意角度旋转实现

本文主要介绍如何基于FPGA实现视频的任意角度旋转，关于视频180度实时旋转、90/270度视频无裁剪旋转，请见本专栏前面的文章，旋转效果示意图如下： 为了实时对比旋转效果，采用分屏显示进行处理，左边代表旋转…...

编程日记 2025/1/26 9:31:47

CPU 缓存基础知识

并发编程首先需要简单了解下现代CPU相关知识。通过一些简单的图，简单的代码，来认识CPU以及一些常见的问题。目录 CPU存储与缓存的引入常见的三级缓存结构缓存一致性协议MESI协议缓存行 cache line 通过代码实例认识缓存行的重要性 CPU指令的乱序执行通过…...

编程日记 2025/1/26 9:30:45

微信小程序date picker的一些说明

微信小程序的picker是一个功能强大的组件，它可以是一个普通选择器，也可以是多项选择器，也可以是时间、日期、省市区选择器。官方文档在这里这里讲一下date picker的用法。 <view class"section"><view class"se…...

编程日记 2025/1/26 9:25:39

Vue3 + TS 实现批量拖拽文件夹和文件组件封装

一、html 代码： 代码中的表格引入了 vxe-table 插件 <Tag /> 是自己封装的说明组件表格列表这块我使用了插槽来增加扩展性，可根据自己需求，在组件外部做调整 <template><div class"dragUpload"><el-dial…...

编程日记 2025/1/26 9:24:38

【Kubernetes】Pod生命周期、初始化容器、主容器

一、Pod生命周期 Pod从创建到终止退出的时间范围称为Pod生命周期。 1、生命周期重要流程创建基础容器（pause container）初始化容器（init-X Containers）主容器（container）启动后的钩子(post-start)启动探…...

编程日记 2025/1/26 9:22:34

2025牛客寒假训练营1-M题

登录—专业IT笔试面试备考平台_牛客网题目是翻倍一个连续子区间内的所有元素,求最大值和最小值的最小差。那么最先的思路肯定是从最小值开始翻倍,然后是次小值,因为如果不翻倍最小值所在区间,那么次小值即使翻倍了只可能增大最大值,而不可能增大最小值。因为区间是连续的,我…...

编程日记 2025/1/26 9:18:29

css3 svg制作404页面动画效果HTML源码

源码介绍 css3 svg制作404页面动画效果HTML源码，源码由HTMLCSSJS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果效果预览源码如下 <!doctype html> <html> <head> <meta charse…...

编程日记 2025/1/26 9:17:28

序列标注：从传统到现代，NLP中的标签预测技术全解析

引言序列标注任务是自然语言处理（NLP）中的核心任务之一，广泛应用于信息抽取、文本分类、机器翻译等领域。随着深度学习技术的快速发展，序列标注任务的性能得到了显著提升。本文将从基础概念入手，逐步深入探讨序列标注…...

编程日记 2025/1/26 9:15:27

软件测试 —— 性能测试（jmeter）

软件测试 —— 性能测试（jmeter） 什么是jmeter安装jmeterjmeter常用组件线程组取样器结果树我们之前学习了接口测试工具Postman，我们今天要学习的是性能测试工具——jmeter 什么是jmeter Apache JMeter 是一个开源的性能测试工具&#xff…...

编程日记 2025/1/26 9:05:12

python介绍ransac算法拟合圆

python介绍ransac算法拟合圆 RANSAC为Random Sample Consensus随机样本一致算法的缩写，它是根据一组包含异常数据的样本数据集，计算出数据的数学模型参数，得到有效样本数据的算法。它于1981年由Fischler和Bolles最先提出。 RANSAC算法经常用…...

编程日记 2025/1/26 9:02:09

WPS计算机二级•表格保护与打印

听说这里是目录哦锁定单元格（保护）🪼工作表被保护时设置允许他人编辑🪸使用密码可编辑不使用密码可编辑表格页面布局调整与设置（打印前）🦄设置页面打印区域🦩表格打印固定标题和…...

编程日记 2025/1/26 9:00:04

Vue组件开发-使用xlsx库导出Excel文件

在Vue.js项目中导出Excel文件，使用第三方库xlsx来简化这个过程。它提供了强大的功能来处理Excel文件。示例，展示如何在Vue.js项目中导出Excel文件。 1. 安装依赖首先，需要安装 xlsx 和 file-saver 这两个库。xlsx 用于生成Excel文件&…...

编程日记 2025/1/26 8:58:33

使用 Pipeline 提高 Redis 批量操作性能

使用 Pipeline 提高 Redis 批量操作性能在 Redis 中，Pipeline（管道） 是一种用于提高批量操作性能的技术。它允许客户端一次性发送多个命令到 Redis 服务器，而不需要等待每个命令的单独响应，从而减少了**网络往返&…...

编程日记 2025/1/26 8:57:26

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2025/12/14 22:18:05

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。同样的技术也是 Power BI 数据…...

编程新知 2025/12/14 17:38:06

【学习笔记】深入理解Java虚拟机学习笔记——第4章虚拟机性能监控，故障处理工具

第2章虚拟机性能监控，故障处理工具 4.1 概述略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...

编程新知 2025/12/5 18:12:58

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一，概述 1. 目的将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动使能uart3(TX:PH00 RX:PH01)，并让boo…...

编程新知 2025/12/7 17:34:15

云原生玩法三问：构建自定义开发环境

云原生玩法三问：构建自定义开发环境引言临时运维一个古董项目，无文档，无环境，无交接人，俗称三无。运行设备的环境老，本地环境版本高，ssh不过去。正好最近对腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/12/12 11:33:47

面向无人机海岸带生态系统监测的语义分割基准数据集

描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/11/26 16:19:28

Python Einops库：深度学习中的张量操作革命

Einops（爱因斯坦操作库）就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库，用类似自然语言的表达式替代了晦涩的API调用，彻底改变了深度学习工程…...

编程新知 2025/10/16 12:04:52

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...

编程新知 2025/12/11 3:33:22