事件流---事件冒泡和事件捕获

本文详细解释了事件冒泡与事件捕获的概念,介绍了这两种事件传播方式的区别,并提供了如何在实际编程中应用这些概念的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简单说一下事件冒泡与事件捕获?

了解它们

事件流

首先我们了解一下什么叫做事件流。

事件流呢:在事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定顺序进行传播,这个过程称为事件流

我们平常说的事件冒泡、事件捕获 就是事件流
1.什么叫做事件冒泡:

所谓冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发,可以理解为一条鱼在水中吐泡,而这个泡是从水里向水面传送,里到外。

文本节点–>元素节点—>body—>html—>document(例如点击事件)<向上响应>

2.什么叫做事件捕获:

是从最外面开始触发的,直到捕获到你点击的div事件为止。
document–>html–>body–>元素节点–>文本节点 <向下响应>

3.应用:

在使用"事件监听"的方式绑定事件时,可以设置事件的响应方式。

DOM对象.addEventListener(事件,事件处理程序,事件冒泡方式)。

事件冒泡方式:
(1)默认为false,表示冒泡阶段完成事件处理
(2)true为捕获阶段完成事件处理

4.阻止事件冒泡:

阻止事件冒泡的方式
常用方法:
(1)事件委托:将元素的绑定事件写起其父元素上,防止事件冒泡

(2)event.stopPropagation():可以阻止事件冒泡,阻止父级元素的绑定事件

小作者持续更新中…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

漠媂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值