addEventListener之第三个参数 true 和 false 实例展示

addEventListener 第三个参数默认是 false false为冒泡事件 true为捕获事件,下面看实例

代码这样实现的话是不是应该先打印子元素child 在打印parent呢,下面看代码实现效果。
在这里插入图片描述
首先打印了parent父级元素 ,然后在打印了 child 子元素 ,但是代码的子元素事件为false是冒泡事件,冒泡事件是从最里面的慢慢冒泡到最顶部 ,打印结果不应该是先打印child后打印parent呢,为什么会这样呢,是因为你点击了子元素执行事件,子元素事件为冒泡,当冒泡到父元素时,父元素为捕获事件,(捕获事件是从最外部的盒子想最里面查找)所以是先打印了父级元素parent再打印child子元素,下面把父元素的捕获事件改为冒泡事件 ,就是说true改为false

在这里插入图片描述
再次点击子元素child 看打印结果
在这里插入图片描述
打印结果为 child parent 因为子元素也是冒泡,子元素冒泡到父元素父元素也为冒泡,一层层向上打印,所以是child parent

这就是addEventListener第三个参数true和false详解

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值