事件冒泡机制详解
一、事件传播的三个阶段
1. 捕获阶段
事件从最外层元素(如`document`)开始,沿着 DOM 树向目标元素传播。这个阶段就像是事件的“下行通道”,在这个过程中,事件会经过目标元素的祖先元素。不过,在捕获阶段,默认情况下,事件不会触发这些祖先元素上绑定的事件处理程序(除非使用`addEventListener`函数的第三个参数`true`来指定在捕获阶段执行处理程序)。
2. 目标阶段
当事件到达目标元素(即实际触发事件的元素,如用户点击的按钮)时,这个阶段就开始了。在目标阶段,目标元素上绑定的事件处理程序会被触发。
3. 冒泡阶段
事件从目标元素开始,沿着 DOM 树向上传播,回到最外层元素。这个阶段就像是事件的“上行通道”,在这个过程中,事件会依次触发经过的祖先元素上绑定的事件处理程序(如果有)。这是事件冒泡机制的核心阶段,也是在前端开发中经常利用的阶段。
二、代码示例
<div id="outer"><div id="middle"><div id="inner">Click Me</div></div></div>
document.getElementById("outer").addEventListener("click", function () {console.log("Outer div clicked");});document.getElementById("middle").addEventListener("click", function () {console.log("Middle div clicked");});document.getElementById("inner").addEventListener("click", function () {console.log("Inner div clicked");});
三、事件冒泡的用途
1. 事件代理(委托)
这是事件冒泡最常见的用途之一。通过将事件处理程序绑定在父元素上,可以处理多个子元素的相同类型事件。这样可以减少事件处理程序的数量,提高性能和代码的可维护性。
2. 在插件和框架开发中的应用
许多前端插件和框架利用事件冒泡来实现灵活的事件处理机制。
四、阻止事件冒泡
在某些情况下,可能不希望事件继续冒泡,例如,当一个子元素的事件处理程序已经完成了所有需要的操作,不希望父元素的事件处理程序也被触发。可以使用`event.stopPropagation()`方法来阻止事件冒泡。在事件处理程序内部,可以通过事件对象(通常作为参数传递给事件处理程序)来调用这个方法。
document.getElementById("inner").addEventListener("click", function (event) {console.log("Inner div clicked");event.stopPropagation();});
五、与事件捕获的对比
事件捕获和事件冒泡是相反的事件传播方向。事件捕获是从外向内传播,而事件冒泡是从内向外传播。在实际开发中,事件捕获的使用相对较少,因为大多数情况下,利用事件冒泡就能满足开发需求。不过,在一些需要精确控制事件传播顺序的场景下,例如,当需要在事件到达目标元素之前就进行处理,或者需要按照特定顺序处理祖先元素和目标元素的事件时,事件捕获就可以发挥作用。同时,需要注意的是,`addEventListener`函数的第三个参数可以用来指定是在捕获阶段(`true`)还是在冒泡阶段(`false`,默认值)执行事件处理程序。
相关文章:
事件冒泡机制详解
一、事件传播的三个阶段 1. 捕获阶段 事件从最外层元素(如document)开始,沿着 DOM 树向目标元素传播。这个阶段就像是事件的“下行通道”,在这个过程中,事件会经过目标元素的祖先元素。不过,在捕获阶段&a…...
红米Note 9 Pro5G刷LineageOS
LineageOS介绍 LineageOS 是一个基于 Android 的开源操作系统,是面向智能手机和平板电脑等设备的替代性操作系统。它是 CyanogenMod 的继承者,而 CyanogenMod 是曾经非常受欢迎的一个第三方 Android 定制 ROM。 在 2016 年,CyanogenMod 项目因…...
6.3.1 MR实战:计算总分与平均分
在本次实战中,我们的目标是利用Apache Hadoop的MapReduce框架来处理和分析学生成绩数据。具体来说,我们将计算一个包含五名学生五门科目成绩的数据集的总分和平均分。这个过程包括在云主机上准备数据,将成绩数据存储为文本文件,并…...
ARM循环程序和子程序设计
1、计算下列两组数据的累加和并存入到sum1和 sum2 单元中。datal:0x12,0x935,0x17,0x100,0x95,0x345。 data2:0x357,0x778,0x129,0x188,0x190,0x155,0x167。 1.定义数据段 ;定义数据段,类型为data(表示为数据段),权限为可读可写(程序可以读取和修改这…...
静态路由、RIP、OSPF、BGP的区别
静态路由:是管理员手动将路由写入到路由器中,配置简单开销小,但不能适应网络变化,只用于小型的网络 RIP,路由信息协议,属于距离矢量路由协议的一种,根据跳数来判断最优路由,如果跳数…...
知识分享第二十八天-数学篇一
组合.二项式定理.常见导数 组合 让我们通过一个具体的例子来理解组合(Combinations)的概念 假设你有一个装有5个不同颜色球的袋子:红、蓝、绿、黄和紫。你想从中随机抽取3个球, 不考虑顺序,那么你可以有多少种不同的…...
BigDecimal在进行除法运算时需要注意四舍五入的位置
我们在进行A除B的时候,需要将四舍五入的逻辑放入除法的过程中就定义,不要等到A/B结果出来了再去进行四舍五入,这样会出现问题。下面举例 10%3 我们拿10除3为例,很明显,结果是一个除不尽的小数3.3333… 直接除 publi…...
第二部分:进阶主题 14 . 性能优化 --[MySQL轻松入门教程]
MySQL性能优化是一个广泛的话题,它涉及到数据库设计、查询语句的编写、索引的使用、服务器配置等多个方面。下面是一些常见的MySQL性能优化策略: 1. 数据库和表结构优化 下面是三个关于MySQL数据库和表结构优化的具体示例: 示例 1: 合理选…...
Mac电脑设置鼠标的滚轮方向
Mac电脑使用鼠标时,上下滚动,方向与Windows相反,如果要保持与Windows一致,则下载MOS这个软件,然后在MOS中进行配置,就可以让鼠标操作方式与Windows一致。 软件下载地址: https://mos.caldis.me…...
【LDAP】LDAP概念和原理介绍
目录 一、前言 二、什么是LDAP? 2.1 什么是目录服务? 2.2 LDAP的介绍 2.3 为什么要使用LDAP 三、LDAP的主要产品线 四、LDAP的基本模型 4.1 目录树概念 4.2 LDAP常用关键字列表 4.3 objectClass介绍 五、JXplorer工具使用 一、前言 对于许多的…...
Android系统(android app和系统架构)
文章目录 AndroidAndroid Apps四大组件 Android系统Platform API之下:一个微笑内核adb(Android Debug Bridge) Android包管理机制Android的Intent机制参考 Android LinuxFrameworkJVM 在Linux/Java上做了个二次开发?并不完全是:Android定义…...
Android HandlerThread、Looper、MessageQueue 源码分析
Android HandlerThread、Looper、MessageQueue 源码分析 简介 在 Android 开发中,大家应该对 HandlerThread 有一定了解。顾名思义,HandlerThread 是 Thread 的一个子类。与普通的 Thread 不同,Thread 通常一次只能执行一个后台任务&#x…...
HTML知识点详解教程
文章目录 HTML知识点详解教程1. HTML基本语法2. HTML标签详解2.1 分区标签 <div>2.2 标题标签 <h1> ~ <h6>2.3 段落标签 <p>2.4 图片标签 <img>2.5 列表标签 <ul> 和 <ol>无序列表 <ul>有序列表 <ol> 2.6 超链接标签 &l…...
[数据结构#1] 并查集 | FindRoot | Union | 优化 | 应用
目录 1. 并查集原理 问题背景 名称与编号映射 数据结构设计 2. 并查集基本操作 (1) 初始化 (2) 查询根节点 (FindRoot) (3) 合并集合 (Union) (4) 集合操作总结 并查集优化 (1) 路径压缩 (2) 按秩合并 3. 并查集的应用 (1) 统计省份数量 (2) 判断等式方程是否成…...
科研绘图系列:R语言绘制网络图和密度分布图(network density plot)
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载图1图2图3图4图5图6图7图8系统信息参考介绍 R语言绘制网络图和密度分布图(network & density plot) 加载R包 library(magrittr) library(dplyr) library(…...
Linux中输入和输出基本过程
1.文件内核级缓冲区 前面在如何理解Linux一切皆文件的特点中提到为了保证在Linux中所有进程访问文件时的方式趋近相 同,在f ile 结构体中存在一个 files_operations 结构体指针,对应的结构体保存所有文件操作的函 数指针(这个结构体也被称为…...
使用 acme.sh 签发和自动续期 ssl https 证书
acme.sh 是一个热度非常高的签发和自动续期 https 证书的工具,虽然官网上提供了充分的操作说明,但是不够简洁,本文以在 nginx 中签发和配置http 为例,列出必要的几个简单步骤。 安装 因为网络原因,github 大部分人是…...
spring重点面试题总结
bean的生命周期 在 Spring 中,BeanDefinition、Bean 实例化、依赖注入、Aware 接口的处理、以及 BeanPostProcessor 的前置和后置处理等,都是 Spring 容器管理 Bean 生命周期的关键部分。下面我将详细解释这些过程。 1. 通过 BeanDefinition 获取 Bean…...
新的一章:codegeex
三层结构的优点:可扩展性,可复用性...
游戏引擎学习第50天
仓库: https://gitee.com/mrxiao_com/2d_game Minkowski 这个算法有点懵逼 回顾 基本上,现在我们所处的阶段是,回顾最初的代码,我们正在讨论我们希望在引擎中实现的所有功能。我们正在做的版本是初步的、粗略的版本,涵盖我们认…...
别再只盯着CLIP了!用PaddlePaddle复现VSE++图文互搜模型(附Flickr8k数据集处理全流程)
突破CLIP局限:基于PaddlePaddle的轻量化图文检索实战指南 在当今多模态AI领域,CLIP等大型模型虽然表现出色,但其庞大的参数量和计算需求让许多开发者和企业望而却步。本文将带您探索一种更轻量、更高效的替代方案——VSE模型,并手…...
HGTector2:微生物基因组水平基因转移检测的完整免费指南
HGTector2:微生物基因组水平基因转移检测的完整免费指南 【免费下载链接】HGTector HGTector2: Genome-wide prediction of horizontal gene transfer based on distribution of sequence homology patterns. 项目地址: https://gitcode.com/gh_mirrors/hg/HGTect…...
QQ聊天数据管理实践指南:全平台数据访问与安全操作手册
QQ聊天数据管理实践指南:全平台数据访问与安全操作手册 【免费下载链接】qq-win-db-key 全平台 QQ 聊天数据库解密 项目地址: https://gitcode.com/gh_mirrors/qq/qq-win-db-key 问题定位:聊天数据管理的核心挑战 在数字化生活中,即时…...
深度学习模型过拟合的实战诊断与优化策略
1. 过拟合现象的诊断方法 第一次训练神经网络时,我盯着训练准确率冲到99%兴奋不已,结果测试集表现只有65%——这就是典型的过拟合现场。判断模型是否过拟合,就像医生看体检报告,需要多维度交叉验证。 最直观的方法是训练集与验证集…...
Phi-3-mini-4k-instruct-gguf免配置环境:开箱即用的Web UI,开发者5分钟上手
Phi-3-mini-4k-instruct-gguf免配置环境:开箱即用的Web UI,开发者5分钟上手 1. 认识Phi-3-mini-4k-instruct-gguf Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本。这个模型特别适合处理问答、文本改写、摘要整理和简短创…...
AI辅助开发:用自然语言描述需求,让快马平台自动生成精准的Copaw自动化脚本
AI辅助开发:用自然语言描述需求,让快马平台自动生成精准的Copaw自动化脚本 最近在做一个自动化测试项目,需要大量使用Copaw框架来模拟用户操作。作为一个刚接触Copaw的新手,最头疼的就是要花大量时间研究各种API和页面元素定位方…...
AI黑科技展示:CYBER-VISION零号协议实时视频分割效果
AI黑科技展示:CYBER-VISION零号协议实时视频分割效果 1. 未来已来:当AI视觉遇见赛博朋克 想象一下这样的场景:一位视障人士戴上智能眼镜,眼前的世界突然变得清晰可辨——人行道上的盲道被高亮标注,前方的障碍物用醒目…...
基于vue的断舍离管理系统[vue]-计算机毕业设计源码+LW文档
摘要:随着物质生活的丰富,物品管理成为人们生活中的一个重要问题。断舍离管理系统的设计与实现旨在帮助用户更好地管理个人物品,通过合理的分类、捐赠和回收机制,实现物品的有效清理和资源的合理利用。本文基于Vue框架设计并实现了…...
Realistic Vision V5.1虚拟摄影棚快速上手:新手3步生成比肩单反的人像
Realistic Vision V5.1虚拟摄影棚快速上手:新手3步生成比肩单反的人像 1. 为什么选择Realistic Vision V5.1虚拟摄影棚 如果你一直想尝试专业级人像摄影,但又苦于没有昂贵的单反设备和摄影棚,Realistic Vision V5.1虚拟摄影棚就是为你量身定…...
基于钓鱼邮件的 DarkSword 攻击对 iOS 设备的威胁机理与防御体系研究
摘要 2026 年 3 月曝光的 DarkSword 攻击以钓鱼邮件为传播载体,针对 iOS 18.4 至 18.7 版本 iPhone 设备实施无文件、静默式入侵,通过组合利用 WebKit 引擎与内核级漏洞实现远程代码执行与敏感数据窃取,已构成面向国际组织与特定目标的高级持…...
