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

深入理解JavaScript中的事件冒泡与事件捕获

news 2025/9/14 22:49:40

在JavaScript中，事件是交互式网页开发中的关键概念之一。了解事件冒泡和事件捕获是成为一名优秀的前端开发者所必需的技能之一。本文将深入探讨这两个概念，解释它们是如何工作的，以及如何在实际应用中使用它们来处理事件。

 

一.什么是事件冒泡和事件捕获？

事件冒泡和事件捕获是一种事件传播的机制，用于确定在DOM（文档对象模型）中的哪个元素上触发事件以及事件触发的顺序。

事件冒泡（Event Bubbling）：在事件冒泡中，事件从最具体的元素开始，然后逐级向上传播到最不具体的元素。也就是说，当在一个子元素上触发事件时，该事件将首先在子元素上触发，然后在父元素、祖父元素，以此类推，一直传播到文档的根元素。

事件捕获（Event Capturing）：相比之下，事件捕获从文档的根元素开始，然后逐级向下传播到最具体的元素。也就是说，事件在捕获阶段从根元素开始向下传播，直到达到触发事件的目标元素。

 

二.事件流程示例

为了更好地理解事件冒泡和事件捕获，我们来看一个简单的HTML结构和JavaScript示例。

<!DOCTYPE html>
<html><head><title>事件冒泡与事件捕获</title></head><body><div id="outer"><div id="middle"><div id="inner">点击我</div></div></div><script>const outer = document.getElementById("outer");const middle = document.getElementById("middle");const inner = document.getElementById("inner");outer.addEventListener("click", () => {console.log("外部元素点击事件 - 冒泡阶段");}, false);middle.addEventListener("click", () => {console.log("中间元素点击事件 - 冒泡阶段");}, false);inner.addEventListener("click", () => {console.log("内部元素点击事件 - 冒泡阶段");}, false);outer.addEventListener("click", () => {console.log("外部元素点击事件 - 捕获阶段");}, true);middle.addEventListener("click", () => {console.log("中间元素点击事件 - 捕获阶段");}, true);inner.addEventListener("click", () => {console.log("内部元素点击事件 - 捕获阶段");}, true);</script></body>
</html>

输出:

 

在这个示例中，我们有一个包含三个嵌套的<div>元素，分别是outer、middle和inner。我们分别在它们上面注册了点击事件的监听器，并通过第三个参数（useCapture）指定了事件捕获阶段（true）和事件冒泡阶段（false）。

 

三.事件流程解释

  • 点击inner元素时，首先触发事件捕获阶段，从根元素html开始向下传播。在捕获阶段，依次触发了outer、middle和inner上的捕获事件监听器。

  • 接着，事件进入冒泡阶段，从触发事件的目标元素inner开始向上冒泡，依次触发了inner、middle和outer上的冒泡事件监听器。

因此，点击inner元素时，事件的流程是从捕获阶段到冒泡阶段，依次经过所有元素。 

 

四.如何使用事件冒泡和事件捕获

了解事件冒泡和事件捕获的工作原理后，你可以灵活运用它们来处理事件。以下是一些示例用途：

  1. 事件委托（Event Delegation）：通过在父元素上监听事件，可以减少事件监听器的数量，提高性能。在事件处理程序中，你可以根据事件的target属性来确定是哪个子元素触发了事件。

  2. 控制事件流：你可以选择在事件捕获阶段或事件冒泡阶段处理事件，具体取决于你的需求。例如，如果你希望在事件到达目标元素之前拦截并处理它，可以使用事件捕获。

  3. 停止事件传播：使用event.stopPropagation()可以停止事件的进一步传播，阻止其继续冒泡或捕获。

 

五.总结

事件冒泡和事件捕获是JavaScript中重要的事件传播机制，允许你更精细地控制事件的处理流程。通过深入理解这两种机制，你可以更好地应对复杂的DOM结构和交互式需求，提高你的前端开发技能。

相关文章：

深入理解JavaScript中的事件冒泡与事件捕获

在JavaScript中&#xff0c;事件是交互式网页开发中的关键概念之一。了解事件冒泡和事件捕获是成为一名优秀的前端开发者所必需的技能之一。本文将深入探讨这两个概念&#xff0c;解释它们是如何工作的&#xff0c;以及如何在实际应用中使用它们来处理事件。 一.什么是事件冒泡…...

编程日记 2023/9/30 5:21:59

纯css html 真实水滴效果

惯例,不多说直接上图 秉承着开源精神,我们将这段代码无私地分享给大家&#xff0c;因为我们深信&#xff0c;信息的共享和互相学习是推动科技进步的关键。我们鼓励大家在使用这段代码的同时&#xff0c;也能够将其中的原理、思想和经验分享给更多的人。 这份代码是我们团队用心…...

编程日记 2023/9/30 5:20:57

HBASE集群主节点迁移割接手动操作步骤

HBASE集群主节点迁移割接手动操作步骤 HBASE集群主节点指的是包含zk、nn、HM和rm服务的节点&#xff0c;一般这类服务都是一起复用在同一批节点上&#xff0c;我把这一类节点统称为HBASE集群主节点。 本文中使用了rsync、pssh等工具&#xff0c;这类是开源的&#xff0c;自己…...

编程日记 2023/9/30 5:19:56

TRB爆仓分析，套利分析，行情判断！

毫无疑问昨日TRB又成为涨幅榜的明星&#xff0c;总结下来&#xff0c;多军赚麻&#xff0c;空头爆仓&#xff0c;套利爽歪歪&#xff01; 先说风险最小的套利情况&#xff0c;这里两种套利都能实现收益。 现货与永续合约的资金费率套利年化资金费率达到惊人的3285%——DeFi的…...

编程日记 2023/9/30 5:18:55

LVGL - RV1109 LVGL UI刷新效率优化-02

说明 前面好早写过一个文章&#xff0c;说明如何把LVGL移到RV1109上的操作&#xff0c;使用DRM方式&#xff01;但出现刷新效率不高的问题&#xff01; 因为一直没有真正的应用在产品中&#xff0c;所以也就放下了&#xff01; 最近开发上需要考虑低成本&#xff0c;低内存的…...

编程日记 2023/9/30 5:17:54

5、布局管理器

5、布局管理器 一、流式布局 package com.dryant.lesson1;import java.awt.*;public class TestFlowLayout {public static void main(String[] args) {Frame frame new Frame();Button button1 new Button("bt1");Button button2 new Button("bt2");…...

编程日记 2023/9/30 5:14:48

What is a UDP Flood Attack?

用户数据报协议 &#xff08;UDP&#xff09; 是计算机网络中使用的无连接、不可靠的协议。它在互联网协议 &#xff08;IP&#xff09; 的传输层上运行&#xff0c;并提供跨网络的快速、高效的数据传输。与TCP&#xff08;其更可靠的对应物&#xff09;不同&#xff0c;UDP不提…...

编程日记 2023/9/30 5:13:47

多核 ARM Server 性能调优

概述 thinkforce ARM Server是多核心ARM服务器&#xff0c;硬件环境资源如下&#xff1a; CPU信息如下: yuxunyuxun:/$ lscpu Architecture: aarch64 CPU op-mode(s): 32-bit, 64-bit Byte Order: Little Endian …...

编程日记 2023/9/30 5:11:44

oracle执行计划中，同一条语句块，在不同情况下执行计划不一样问题。子查询，union 导致索引失效。

场景&#xff1a; 需要获取部分数据集(视图)的业务时间最大值&#xff0c;希望只通过一条语句获取多个的最大值。 则使用select (视图1业务时间最大值),(视图2业务时间最大值),(视图3业务时间最大值) from dual 程序执行过程中&#xff0c;发现语句执行较慢&#xff0c;则进行s…...

编程日记 2023/9/30 5:10:43

【新的小主机】向日葵远程控制ubuntu

向日葵远程控制ubuntu 一、简介二、问题及解决方法2.1 向日葵远程连接Ubuntu22主机黑屏&#xff1f;2.2 Ubuntu如何向日葵开机自启&#xff1f;2.3 无显示器情况下&#xff0c;windows远程桌面连接Ubuntu? 三、待续。。。 一、简介 系统&#xff1a;ubuntu22.04.3 目的&#…...

编程日记 2023/9/30 5:09:41

在Android studio高版本上使用低版本的Github项目库报错未能解析：Landroid/support/v4/app/FrageActivity；

我在我的项目中有一个导包: // 基础依赖包&#xff0c;必须要依赖 沉浸式狀態欄 implementation com.gyf.immersionbar:immersionbar:3.0.0 但是我的as版本比较高,我使用这个导包里面的方法会直接报错: java.lang.NoClassDefFoundError: Failed resolution of: Landroid/suppor…...

编程日记 2023/9/30 5:07:39

自动混剪多段视频、合并音频、添加文案的技巧分享

在如今的社交媒体时代&#xff0c;视频的重要性越来越被人们所重视。许多人喜欢记录生活中的美好瞬间&#xff0c;并将其制作成视频分享给朋友和家人。然而&#xff0c;对于那些拍摄了大量视频的人来说&#xff0c;一个一个地进行剪辑和合并可能是一项令人头痛的任务。但是&…...

编程日记 2023/9/30 5:04:34

学习笔记——BSGS

众所周知&#xff0c;北上广深是中国非常一线的城市&#xff0c;北京是首都&#xff0c;地处…… 正片开始&#xff01; 一、BSGS基础算法 实现目标&#xff1a; A x ≡ B ( m o d P ) , ( gcd ⁡ ( P , A ) 1 ) A^x\equiv B(\mod P),(\gcd(P,A)1) Ax≡B(modP),(gcd(P,A)1)…...

编程日记 2023/9/30 5:03:33

【AI视野·今日NLP 自然语言处理论文速览 第四十期】Mon, 25 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Mon, 25 Sep 2023 Totally 46 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers ReConcile: Round-Table Conference Improves Reasoning via Consensus among Diverse LLMs Authors Justin C…...

编程日记 2023/9/30 5:01:32

Linux C/C++下收集指定域名的子域名信息（类似dnsmap实现）

我们知道dnsmap是一个工具&#xff0c;主要用于收集指定域名的子域名信息。它对于渗透测试人员在基础结构安全评估的信息收集和枚举阶段非常有用&#xff0c;可以帮助他们发现目标公司的IP网络地址段、域名等信息。 dnsmap的操作原理 dnsmap&#xff08;DNS Mapping&#xff…...

编程日记 2023/9/30 4:58:26

linux-定时任务

目录 一、crond命令 1、什么是计划任务 2、crond服务的概念 3、crontab 二、at命令 1、at任务的概念 三、邮件服务 1、概念 2、启动postfix 四、mailx命令 1、三个概念&#xff1a; 2、交互式发邮件 3、非交互式发邮件 四、cron定时任务实践 1、系统定时任务配置…...

编程日记 2023/9/30 4:57:25

在Spring Boot项目中使用Redisson

在Spring Boot项目中使用Redisson Redisson简介 Redisson官网仓库 Redisson中文文档 Redission是一个基于Java的分布式缓存和分布式任务调度框架&#xff0c;用于处理分布式系统中的缓存和任务队列。它是一个开源项目&#xff0c;旨在简化分布式系统的开发和管理。 以下是…...

编程日记 2023/9/30 4:52:18

JavaScript 函数柯里化

&#x1f3b6;什么是柯里化 柯里化&#xff08;Currying&#xff09;是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数&#xff0c;并且返回接受余下的参数且返回结果的新函数的技术。 &#x1f3a1;简单的函数柯里化的实现 // ------------- 原函数…...

编程日记 2023/9/30 4:50:16

springboot实现ACL+RBAC权限体系

本文基于web系统的权限控制非常重要的前提下&#xff0c;从ALC和RBAC权限控制两个方面&#xff0c;介绍如何在springboot项目中实现一个完整的权限体系。 源码下载 &#xff1a;https://gitee.com/skyblue0678/springboot-demo 序章 一个后台管理系统&#xff0c;基本都有一套…...

编程日记 2023/9/30 4:45:09

C++20协程示例

C20协程示例 认识协程 在C中&#xff0c;协程就是一个可以暂停和恢复的函数。 包含co_wait、co_yield、co_return关键字的都可以叫协程。 看一个例子&#xff1a; MyCoroGenerator<int> testFunc(int n) {std::cout << "Begin testFunc" << s…...

编程日记 2023/9/30 4:44:08

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/9/9 10:11:30

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/9/6 15:52:58

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/8/21 20:18:45

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2025/8/19 6:37:10

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/7/24 7:13:48

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/9/2 21:03:39

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2025/7/9 18:52:53

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2025/9/7 2:24:50

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2025/9/7 8:48:57

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/9/9 10:08:16