你根本不懂Javascript(5): HTML事件捕获与冒泡

本文最初发布于http://szhshp.org
转载请注明

事件捕捉与冒泡

先捕获的必然是父节点, 然后一层层向下捕获, 然后一层层向上冒泡

这里是一个td被点击的效果图

 
通过三个阶段:
  1. 捕捉阶段: 从父节点, 逐渐向目标节点冒泡, 即自上向下
  2. 接近目标elem阶段(这一阶段会同时激活第一阶段和第三阶段的handler)
  3. 冒泡阶段: 从子节点向父节点冒泡

事件绑定机制

  1. onXXX(event)
  2. addEventListener(event, handler)
  3. jQuery的elem.on(event, selector, handler)

这里有几点需要注意的:

event.target: 发起event的elem

this: 当前elem

  • 通过onXXX()或者addEventListener(event, handler)绑定的事件无法接触到捕捉阶段, 他们只会响应第二和第三阶段
  • 此外, 对于addEventListener(event, handler)的最后一个函数:
    • false: handler放置在冒泡阶段
    • true: handler放置在捕捉阶段
  • 仅仅对于elem.on(event, selector, handler), 只需要return false可以既阻止默认事件, 又防止冒泡

阻止冒泡

一般不需要阻止冒泡, 因为阻止冒泡之后,可能影响其他事件捕捉机制

组织冒泡的核心在于这个函数:event.stopPropagation()

阻止冒泡之后, 事件将不会继续传递

下面这一段就不会调用到bodyonclick

<body onclick="alert(`the bubbling doesn't reach here`)">
  <button onclick="event.stopPropagation()">Click me</button> <!-- 错误的例子,这个仅仅阻止了默认事件 --> <!-- <button onclick="return false;">Click me</button> --> </body> 

另外几种阻止冒泡的用法:

// 既阻止冒泡, 又阻止默认事件, 仅仅对于`elem.on(event, selector, handler)`有效
// $("#div1").on('click',function(){
//     return false;
// }); //以下两种情况阻止事件冒泡 //oEvent.cancelBubble = true; //oEvent.stopPropagation(); //以下两种情况阻止默认行为, 没有停止冒泡 //没有停止冒泡 //oEvent.preventDefault(); //return false; 

参考文献

https://javascript.info/bubbling-and-capturing

 

转载于:https://www.cnblogs.com/szhshp/p/8536721.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值