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

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

news 2025/9/10 19:55:39

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”。

输出顺序：

  1. “Child clicked”
  2. “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”。

输出顺序：

  1. “Parent clicked (Capture)”
  2. “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 事件不会被触发。

输出顺序：

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

4. 总结与应用

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

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

相关文章：

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

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

编程日记 2025/1/26 9:49:56

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

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

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

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

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

编程日记 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实现视频的任意角度旋转&#xff0c;关于视频180度实时旋转、90/270度视频无裁剪旋转&#xff0c;请见本专栏前面的文章&#xff0c;旋转效果示意图如下&#xff1a; 为了实时对比旋转效果&#xff0c;采用分屏显示进行处理&#xff0c;左边代表旋转…...

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

CPU 缓存基础知识

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

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

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

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

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

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

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

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

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

一、Pod生命周期 Pod从创建到终止退出的时间范围称为Pod生命周期。 1、生命周期重要流程 创建基础容器&#xff08;pause container&#xff09;初始化容器&#xff08;init-X Containers&#xff09;主容器&#xff08;container&#xff09;启动后的钩子(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源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果 效果预览 源码如下 <!doctype html> <html> <head> <meta charse…...

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

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

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

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

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

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

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

python介绍ransac算法拟合圆

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

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

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

听说这里是目录哦 锁定单元格&#xff08;保护&#xff09;&#x1fabc;工作表被保护时 设置允许他人编辑&#x1fab8;使用密码可编辑不使用密码可编辑 表格页面布局 调整与设置&#xff08;打印前&#xff09;&#x1f984;设置页面打印区域&#x1f9a9;表格打印固定 标题和…...

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

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

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

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

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

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

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

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/9/2 16:59:53

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/9/2 16:59:49

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/9/7 8:53:56

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/8/28 7:47:23

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/7/11 22:34:49

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/9/9 15:31:38

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/7/27 1:33:21

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/8/26 22:46:30

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2025/9/2 17:47:54

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

编程新知 2025/9/7 8:49:05