JS-DOM事件流

本文介绍了DOM事件流的概念,包括捕获阶段、当前目标阶段和冒泡阶段。在JavaScript中,addEventListener的第三个参数用于指定事件处理程序是在捕获还是冒泡阶段执行。通常在实际开发中,更倾向于使用冒泡阶段。举例说明了如何使用stopPropagation()阻止事件冒泡,以及通过事件委托利用冒泡来影响子元素。
摘要由CSDN通过智能技术生成
事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。

DOM事件流

DOM事件流分为三个阶段:
1.捕获阶段
2.当前目标阶段
3.冒泡阶段

在这里插入图片描述

注意

  1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
  2. onclick 和 attachEvent 只能得到冒泡阶段。
  3. addEventListener(type, listener[, useCapture])第三个参数如果是 true,表示在事件捕
    获阶段
    调用事件处理程序;如果是 false(不写默认就是false),表示在事件冒泡阶段调用事件处理
    程序。
  4. 实际开发中很少使用事件捕获,而是更关注事件冒泡。

举个例子:

<div class="father">
	<div class="son"></div>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值