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

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

news 2025/7/14 7:26:33

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

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/7/12 20:10:29

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/7/6 1:55:51

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/7/6 4:52:27

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/7/13 6:21:16

MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

编程新知 2025/7/8 0:08:58

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

编程新知 2025/7/11 15:47:33

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

编程新知 2025/7/10 11:21:38

python打卡day49@浙大疏锦行

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 一、通道注意力模块复习 & CBAM实现 import torch import torch.nn as nnclass CBAM(nn.Module):def __init__…...

编程新知 2025/7/7 16:18:41

汇编语言学习（三）——DoxBox中debug的使用

目录 一、安装DoxBox&#xff0c;并下载汇编工具&#xff08;MASM文件&#xff09; 二、debug是什么 三、debug中的命令 一、安装DoxBox&#xff0c;并下载汇编工具&#xff08;MASM文件&#xff09; 链接&#xff1a; https://pan.baidu.com/s/1IbyJj-JIkl_oMOJmkKiaGQ?pw…...

编程新知 2025/7/12 7:17:21

GitHub 常见高频问题与解决方案（实用手册）

1.Push 提示权限错误&#xff08;Permission denied&#xff09; 问题&#xff1a; Bash Permission denied (publickey) fatal: Could not read from remote repository. 原因&#xff1a; 没有配置 SSH key 或使用了 HTTPS 而没有权限…...

编程新知 2025/7/9 20:28:10