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

在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>元素,分别是outermiddleinner。我们分别在它们上面注册了点击事件的监听器,并通过第三个参数(useCapture)指定了事件捕获阶段(true)和事件冒泡阶段(false)。

 

三.事件流程解释

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

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

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

 

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

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

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

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

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

 

五.总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/144828.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Shape设置背景

设置背景时&#xff0c;经常这样 android:background“drawable/xxx” 。如果是纯色图片&#xff0c;可以考虑用 shape 替代。 shape 相比图片&#xff0c;减少资源占用&#xff0c;缩减APK体积。 开始使用。 <?xml version"1.0" encoding"utf-8"?…

智慧安防视频监控技术+AI智能分析算法助力美好乡村建设

上期我们聊到AI智能视频监控技术如何助力美好乡村建设&#xff1f;的相关方案&#xff0c;收到了很多粉丝的讨论与关注&#xff0c;视频监控只是乡村建设极其基础的一环&#xff0c;基于视频监控平台的AI智能算法&#xff0c;将人工智能融合到安防监控之中&#xff0c;才能让乡…

【Linux】详解线程第三篇——线程同步和生产消费者模型

线程同步和生消模型 前言正式开始再次用黄牛抢票来讲解线程同步的思想通过条件变量来实现线程同步条件变量接口介绍初始化和销毁pthread_cond_waitsignal和broadcast 生产消费者模型三种关系用基本工程师思维再次理解基于生产消费者模型的阻塞队列版本一版本二多生多消 利用RAI…

第79步 时间序列建模实战:支持向量机回归建模

基于WIN10的64位系统演示 一、写在前面 这一期&#xff0c;我们介绍支持向量机&#xff08;SVM&#xff09;回归。 同样&#xff0c;这里使用这个数据&#xff1a; 《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemor…

【图像处理】SIFT角点特征提取原理

一、说明 提起在OpenCV中的特征点提取&#xff0c;可以列出Harris&#xff0c;可以使用SIFT算法或SURF算法来检测图像中的角特征点。本篇围绕sift的特征点提取&#xff0c;只是管中窥豹&#xff0c;而更多的特征点算法有&#xff1a; Harris & Stephens / Shi–Tomasi 角点…

C进阶--数据的存储

⚙ 1. 数据类型介绍 1.1基本内置类型 ⭕ 整形&#xff1a; char(char又叫短整型)unsigned charsigned charshortunsigned short[int]signed short [int]intunsigned intsigned intlongunsigned long [int]signed long [int] ⭕ 浮点数&#xff1a; float&#xff08;单精度浮…

Idea引入thymeleaf失败解决方法

报错 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback.Fri Sep 29 09:42:00 CST 2023 There was an unexpected error (typeNot Found, status404). 原因&#xff1a;html没有使用thymeleaf 首先要引入…

java mongodb 并表 group 查询 Bson

对mongodb的使用中&#xff0c;需要将发生额表occr期初表open表&#xff0c;进行union的并表操作后&#xff0c;再进行group&#xff0c;sum&#xff0c;排序&#xff0c;分页操作。 查询了一番后&#xff0c;mongodb4.4版本后&#xff0c;新增了一个管道符&#xff0c;$union…

使用Vue、ElementUI实现登录注册,配置axios全局设置,解决CORS跨域问题

目录 引言 什么是ElementUI&#xff1f; 步骤1&#xff1a;创建Vue组件用于用户登录和注册 1. 基于SPA项目完成登录注册 在SPA项目中添加elementui依赖 在main.js中添加elementui模块 创建用户登录注册组件 配置路由 修改项目端口并启动项目 静态页面展示图 步骤2&#x…

【文献】TOF标定 Time-of-Flight Sensor Calibration for a Color and Depth Camera Pair

文章目录 Article info.Introduction处理TOF误差Take home messagesResourcesIDEAS Article info. Time-of-Flight Sensor Calibration for a Color and Depth Camera Pair IEEE TRANSACTIONS ON PATTERN ANALYSIS AND MACHINE INTELLIGENCE, VOL. 37, NO. 7, JULY 2015 Intr…

FreeRTOS入门教程(空闲任务和钩子函数及任务调度算法)

文章目录 前言一、空闲任务概念二、钩子函数概念三、任务调度算法四、任务调度算法实验1.实验代码2.是否抢占3.时间片是否轮转4.空闲任务让步 总结 前言 本篇文章将带大家学习一下什么是空闲任务以及钩子函数&#xff0c;以及学习FreeRTOS中的任务调度算法&#xff0c;了解在F…

京东大型API网关实践之路

概述 1、背景 京东作为电商平台&#xff0c;近几年用户、业务持续增长&#xff0c;访问量持续上升&#xff0c;随着这些业务的发展&#xff0c;API网关应运而生。 API网关&#xff0c;就是为了解放客户端与服务端而存在的。对于客户端&#xff0c;使开放给客户端的接口标准统…

docker系列(9) - docker-compose

文章目录 9. compose编排9.1 介绍9.2 安装9.3 compose常用命令9.4 实战Springboot部署9.4.1 准备组件配置文件9.4.1.1 redis的配置文件9.4.1.2 MySQL的配置文件9.4.1.3 SpringBoot打包文件 9.4.2 准备docker-compose.yml9.4.3 启动服务9.4.4 测试验证 9.5 实战ElasticsearchKib…

华为智能高校出口安全解决方案(2)

本文承接&#xff1a; https://qiuhualin.blog.csdn.net/article/details/131475315?spm1001.2014.3001.5502 重点讲解华为智能高校出口安全解决方案的基础网络安全&业务部署与优化的部署流程。 华为智能高校出口安全解决方案&#xff08;2&#xff09; 课程地址基础网络…

正在等待操作系统重新启动。 请重新启动计算机以安装autocad 2024。

正在等待操作系统重新启动。 请重新启动计算机以安装autocad 2024。 这是刚启动Autodesk 2024产品就弹出的弹窗&#xff0c;重启之后启动还是有这个 一直阻止安装程序运行 出现问题的原因是安装包存在问题 使用正确的安装包即可解决这个问题 需要的朋友查看图片或者评伦取…

手动实现Transformer

Transformer和BERT可谓是LLM的基础模型&#xff0c;彻底搞懂极其必要。Transformer最初设想是作为文本翻译模型使用的&#xff0c;而BERT模型构建使用了Transformer的部分组件&#xff0c;如果理解了Transformer&#xff0c;则能很轻松地理解BERT。 一.Transformer模型架构 1…

Qt扩展-QCustomPlot 简介及配置

QCustomPlot 简介及配置 一、概述二、安装教程三、帮助文档的集成 一、概述 QCustomPlot是一个用于绘图和数据可视化的Qt 控件。它没有进一步的依赖关系&#xff0c;并且有良好的文档记录。这个绘图库专注于制作好看的、发布质量的2D绘图、图形和图表&#xff0c;以及为实时可…

洗衣行业在线预约小程序系统源码搭建 支持直播功能+在线预约下单+上门取件

目前&#xff0c;人们对生活品质的追求不断提高&#xff0c;但生活节奏却也不断加快。对品质的追求遇到了忙碌的生活节奏&#xff0c;人们更渴望以最简单、便捷的方式达到追求品质的目的。同时&#xff0c;由于线上支付的普及&#xff0c;大家更希望足不出户就可以解决自己生活…

DevSecOps 将会嵌入 DevOps

通常人们在一个项目行将结束时才会考虑到安全&#xff0c;这么做会导致很多问题&#xff1b;将安全融入到DevOps的工作流中已产生了积极结果。 DevSecOps&#xff1a;安全正当时 一直以来&#xff0c;开发人员在构建软件时认为功能需求优先于安全。虽然安全编码实践起着重要作…

react.js在visual code 下的hello World

想学习reacr.js &#xff0c;就开始做一个hello world。 我的环境是visual code &#xff0c;所以我找这个环境下的例子。参照&#xff1a; https://code.visualstudio.com/docs/nodejs/reactjs-tutorial 要学习react.js &#xff0c;还得先安装node.js&#xff0c;我在visual …