事件冒泡与捕获

一、事件流基础:事件冒泡与捕获的起源

  1. 事件流概念
    • 事件发生时在DOM节点上的传播顺序,触发一个节点的事件会连锁触发相关节点的事件。
  2. 两种对立模型
    • 事件捕获(微软提出):事件从文档根节点(如document)开始,逐级向目标节点传播,父节点先于子节点触发事件。
    • 事件冒泡(网景提出):事件从目标节点开始,逐级向根节点传播,子节点先于父节点触发事件。
  3. W3C统一模型
    • 采用“先捕获后冒泡”的流程:事件先从根节点捕获到目标节点(捕获阶段),再从目标节点冒泡回根节点(冒泡阶段)。

二、事件捕获(Event Capturing)

  1. 传播顺序
    • 从DOM树顶层(如documenthtmlbody)逐步向下到目标节点。
    • 例:点击<a>标签时,捕获顺序为documentdivpa
  2. 绑定事件方法
    • 使用addEventListener,第三个参数设为true
    element.addEventListener("click", handler, true); // 捕获阶段触发
    

三、事件冒泡(Event Bubbling)

  1. 传播顺序
    • 从目标节点开始,逐级向上到根节点。
    • 例:点击<a>标签时,冒泡顺序为apdivbodydocument
  2. 绑定事件默认行为
    • addEventListener第三个参数默认false(冒泡阶段触发),或直接使用onclick等属性绑定(默认冒泡):
    element.addEventListener("click", handler); // 等价于传入false,冒泡阶段触发
    element.onclick = handler; // 默认冒泡阶段触发
    

四、阻止事件传播

  1. 阻止捕获和冒泡
    • event.stopPropagation():终止事件在捕获和冒泡阶段的传播,后续节点的事件不再触发,但不影响当前节点的其他事件处理程序。
  2. 阻止同一节点的后续事件
    • event.stopImmediatePropagation():不仅阻止传播,还会中断当前节点上同一事件的其他事件处理程序执行(即使已绑定的事件)。

五、阻止默认事件行为

  1. 方法
    • event.preventDefault():取消事件的默认行为(如链接跳转、表单提交等)。
    • 兼容性:IE9及以下不支持,需用event.returnValue = false替代。
  2. 示例
    // 阻止链接跳转
    link.addEventListener("click", function(event) {
        event.preventDefault(); // 标准浏览器
        event.returnValue = false; // IE9及以下兼容
    });
    

六、核心知识点对比

特性事件捕获事件冒泡
传播方向根节点 → 目标节点目标节点 → 根节点
绑定参数addEventListener(..., true)addEventListener(..., false)(默认)
典型应用全局事件监听(如点击空白处关闭弹窗)事件代理(通过父节点统一处理子节点事件)
阻止方法作用
stopPropagation()阻止事件向父/子节点传播
stopImmediatePropagation()阻止传播并中断当前节点同事件的后续处理
preventDefault()阻止事件默认行为(如表单提交、链接跳转)

总结

  • 事件流流程:先捕获(根→目标),后冒泡(目标→根)。
  • 事件绑定:通过addEventListener的第三个参数控制阶段(true=捕获,false=冒泡)。
  • 事件控制stopPropagation()阻止传播,preventDefault()阻止默认行为,stopImmediatePropagation()额外中断同节点事件。
  • 应用场景:捕获适合全局控制,冒泡适合事件代理(减少内存占用),阻止方法用于避免事件干扰。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值