JavaScript的冒泡与捕获

1.概念。

冒泡事件:微软公司提出的,事件由子元素传递到父元素的过程叫做冒泡(false)。

捕获事件:网景公司提出的,事件由父元素传递到子元素的过程叫做事件捕获(ture)。

2.冒泡事件与捕获事件的区别

冒泡事件:事件从子级向父级传递。捕获事件:事件从父级传递向子级。

1、触发顺序:事件捕获先于事件冒泡触发。在事件捕获阶段,事件从DOM树的根节点向下传播到目标元素;在事件冒泡阶段,事件从目标元素向上冒泡到根节点。

2、事件处理程序执行顺序:在事件捕获阶段,父级元素的事件处理程序会先于子级元素的事件处理程序执行;在事件冒泡阶段,子级元素的事件处理程序会先于父级元素的事件处理程序执行。

3、默认阶段:大多数事件处理程序默认情况下在事件冒泡阶段触发,因此它们通常在事件冒泡阶段被执行。但是,可以使用addEventListener的第三个参数来指定事件是在事件捕获阶段还是事件冒泡阶段处理。
在实际开发中,事件冒泡通常用得更多,因为它更符合常见的需求。通过事件冒泡,我们可以从子元素向父元素传递事件,便于事件委托和处理。然而,如果你需要更细粒度的控制事件的流动,或者需要在目标元素之前处理事件,那么可以使用事件捕获。

3.原理

事件冒泡的原理: 事件从触发它的最具体的元素(目标元素)开始,然后逐级向上冒泡到更一般的元素,直到达到DOM树的根节点。当事件冒泡时,父级元素的事件处理程序会在子级元素的事件处理程序之前被触发。
事件冒泡的使用场景: 事件冒泡的一个常见应用场景是事件委托(event delegation)。通过事件委托,我们可以将事件处理程序绑定到父级元素,而不是直接绑定到每个子元素,从而减少了事件处理程序的数量,提高了性能和代码的可维护性。

事件捕获的原理:事件从DOM树的根节点开始,然后逐级向下捕获到最具体的元素(目标元素)。当事件捕获时,父级元素的事件处理程序会在子级元素的事件处理程序之后被触发。

事件捕获的使用场景:

(1)事件处理程序前置操作:如果你需要在事件达到特定元素之前执行一些操作,例如在事件到达目标元素之前进行验证或修改事件的行为,可以使用事件捕获。通过在父级元素上使用事件捕获,你可以在事件到达目标元素之前拦截事件并进行处理。
(2)高级事件处理:一些复杂的交互行为可能需要更细粒度的控制,而事件捕获提供了这种能力。例如,你可能需要在事件捕获阶段使用stopPropagation方法停止事件的传播,以防止事件继续向下冒泡。
 

示例代码来演示事件冒泡

首先有三个div  层级分别为d1>d2>d3。为他们分别添加点击事件,当我们点击d1,只会打印d1.

但当我们点击d2 打印结果依次为d2 d1;点击d3  打印结果为d3 d2 d1。这就是冒泡排序,事件从子级向父级传递。

示例代码来演示事件捕获

 在捕获事件触发的前提,我们需要使用事件监听 document.addEventListener('event',funciton(){},true)  这里的true是布尔值判断是否为捕获事件,当为true时,这里为捕获事件,如果为false时,这里就是冒泡事件

<div id="parent"><div id="child"><button id="btn">Click me</button></div>
</div>const parent = document.getElementById('parent');
const child = document.getElementById('child');
const btn = document.getElementById('btn');// 在事件捕获阶段触发事件处理程序
parent.addEventListener('click', function() {console.log('Parent element is clicked');
}, true);child.addEventListener('click', function() {console.log('Child element is clicked');
}, true);btn.addEventListener('click', function() {console.log('Button is clicked');
});

在上述代码中,我们在父级元素parent和子级元素child上分别使用事件捕获来绑定事件处理程序。通过设置addEventListener的第三个参数为true,我们指定了使用事件捕获模式。
当点击按钮btn时,事件的触发顺序将是:parent捕获阶段 -> child捕获阶段 ->
btn冒泡阶段。通过观察控制台输出,你可以看到事件处理程序按照捕获阶段的顺序被触发。
 

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

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

相关文章

vscode copilot怎么去掉提示代码(ghost text or incline completion)

原因&#xff1a;最近在刷题&#xff0c;被这个提示烦死了&#xff0c;记录一下怎么关掉&#xff0c;防止将来需要开启找不到了XD. 1.直接ctrlshiftp召唤设置 2.输入preferences: open usr settings找到如图第一个 3.去掉这个方框的勾选 ps直接在extension里disable不行呢 不…

使用宝塔面板部署Node.js+Mysql服务和Vue3-Admin项目到云服务器上

准备工作 一台云服务器&#xff0c;可以先用免费试用一个月的服务器进行练手&#xff1b;我这里选择的是腾讯云的轻量云服务器&#xff1b; 1、在云服务器上安装宝塔面板 宝塔面板官网地址&#xff1a;https://www.kancloud.cn/chudong/bt2017/424209 1.1 安装Xshell脚本工…

Byte Pair Encoding(BPE)算法及代码笔记

Byte Pair Encoding&#xff08;BPE&#xff09;算法 BPE算法是Transformer中构建词表的方法&#xff0c;大致分为如下几个步骤&#xff1a; 将语料中的文本切分为字符统计高频共现二元组将共现频率最高的二元组合并加入词表重复上述第二和第三直到词表规模达到预先设置的数量…

c语言之if-else多分支语句结构

c语言的if-else多分支语句结构语法如下 if(表达式1) 语句1 else if(表达式2) 语句2 else if(表达式3&#xff09;语句3 else if&#xff08;表达式4&#xff09; 语句4 示例代码如下 输入年龄&#xff0c;小于12输出“儿童”&#xff0c;大于12小于18输出“青少年”,大于…

获取本机请求时真实ip

前言 有时候我们需要调用别人的接口&#xff0c;需要对自己的真实ip加入白名单才能调通&#xff0c;但是请求发出后会经过层层代理&#xff0c;导致我们不知道自己请求的真实ip&#xff0c;下面这个方法可以拿到 package com.sinosoft.springbootplus.lft.business.dispatch.…

HarmonyOS--@ObjectLink和@Observed

ObjectLink和Observed装饰器用于在涉及嵌套对象或数组元素为对象的场景中进行双向数据同步。 在HarmonyOS应用开发中&#xff0c;ObjectLink和Observed是两个重要的注解&#xff0c;它们主要用于实现分布式数据的跨设备传输和同步&#xff1a; ObjectLink&#xff1a; 通俗解释…

你好,C++对象

你好&#xff0c;对象 面向对象开发对象的定义 类与对象类的定义类的访问限定符及封装类的实例化类对象模型结构体内存对齐规则 this指针this指针的引入 this指针的特性 类的默认成员函数构造函数析构函数拷贝构造函数结语 面向对象开发 对象的定义 对象的含义是指具体的某一…

MySQL 聚集与非聚集索引

文章目录 1.聚集索引1.1 介绍1.2 优点1.3 缺点 2.非聚集索引3.区别参考文献 MySQL 中&#xff0c;根据索引树叶结点存放数据行还是数据行的地址&#xff0c;可以将索引分为两类&#xff1a; 存放数据行&#xff1a;聚集索引存放数据行地址&#xff1a;非聚集索引 InnoDB 使用聚…

Keil-C语言小总结

1、 &取地址符&#xff0c;*取地址内容 int *ptr;//声明指针 2、ptr &c; // 将c的地址赋值给指针变量ptr 3、可选参数函数 4、C宏定义 5、 memset&#xff1a;最快的数据清零函数 void *memset(void *s, int ch, size_t n); 分别是 字符串 要值的数据&#xff08;0…

TensorFlow2实战-系列教程4:数据增强:keras工具包/Data Augmentation

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 对于图像数据&#xff0c;将其进行翻转、放缩、平移、旋转操作就可以得到一组新的数据…

分布式ID(3):雪花算法生成ID之UidGenerator(百度开源的分布式唯一ID生成器)

1 UidGenerator官方地址 UidGenerator源码地址: https://github.com/baidu/uid-generator UidGenerator官方说明文档地址: https://github.com/baidu/uid-generator/blob/master/README.zh_cn.md 这边只做简单介绍,详细说明请看官方说明文档。 2 Snowflake算法 Snowfl…

spring boot学习第八篇:操作elastic search的索引和索引中的数据

前提参考&#xff1a;elastic search入门-CSDN博客 前提说明&#xff1a;已经安装好了elastic search 7.x版本&#xff0c;我的es版本是7.11.1 1、 pom.xml文件内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns&q…

空间计算时代催生新一波巨大算力市场需求

什么是空间计算&#xff1f; 空间计算是一种整合虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff09;、混合现实&#xff08;MR&#xff09;等技术的计算模式&#xff0c;旨在将数字信息与真实世界融合在一起。这种融合创造了一个全新的计算环境&#xff…

【极数系列】docker环境搭建Flink1.18版本(04)

文章目录 引言01 Linux安装Docker1.安装yum-utils软件包2.安装docker3.启动docker4.设置docker自启动5.配置Docker使用systemd作为默认Cgroup驱动6.重启docker 02 docker部署Flink1.18版本1.拉取最新镜像2.检查镜像3.编写dockerFile文件4.执行dockerFile5.检查flink是否启动成功…

一个SSE(流式)接口引发的问题

前言 最近我们公司也是在做认知助手&#xff0c;大模型相关的功能&#xff0c;正在做提示词&#xff0c;机器人对话相关功能。想要提高用户体验&#xff0c;使用SSE请求模式&#xff0c;在不等数据完全拿到的情况下边拿边返回。 之前做过一版&#xff0c;但不是流式返回&…

机房环境动力监控系统:S275远程控制网关助力高效管理

现场问题 1、机房安全隐患 机房存在意外断电、温湿度过高过低、漏水断路等隐患&#xff0c;传统监测手段难以提前发现和预警。 2、机房远程运维困难 因环境改变、非授权活动、设备状态变化等引起的事故&#xff0c;难以满足机房远程运维的可靠管控要求。 3、机房改造成本高…

Django 实现SS

1、简单的sse只要用django内置的StreamingHttpResponse就可以实现 2、django-sse这个第三方库已经有10年没有更新&#xff0c;不要用这个库了。 3、告知前端关闭SSE连接需要发送yield "event: close\ndata: \n\n" 而不能只发送yield "event: close\n" …

菱形打印和十进制ip转二进制

1.菱形打印 用for循环 #!/bin/bashread -p "请输入菱形的大小&#xff1a;" num #打印向上的等腰三角形 for ((i1;i<num;i)) dofor ((jnum-1;j>i;j--))doecho -n " " #打印的是前面的空格donefor ((k1;k<2*i-1;k))doecho -n "*" #打印…

OneNote中的键盘快捷记录(超全)

本文列出了桌面 WindowsOneNote 的键盘快捷方式。 常用快捷方式 执行的操作 按 打开新的 OneNote 窗口。 CtrlM 创建 快速笔记。 CtrlShiftM 或 AltWindows 徽标键N 停靠 OneNote 窗口。 CtrlAltD 撤消前一个操作。 CtrlZ 如果可能&#xff0c;请重做上一个操作。 …

HCIE之BGP正则表达式(四)

BGP 一、AS-Path正则表达式数字| 等同于或的关系[]和.$ 一个字符串的结束_代表任意^一个字符串的开始()括号包围的是一个组合\ 转义字符* 零个或多个&#xff1f;零个或一个一个或多个 二、BGP对等体组三、BGP安全性 一、AS-Path正则表达式 正则表达式是按照一定模版匹配字符串…