11-21小结

前段碎片 专栏收录该内容
4 篇文章 0 订阅
  • JS的事件委托机制:利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!(提高性能;新插入的元素也能具有其兄弟元素的事件)
//范例
<ul>
  <li>香蕉</li>
  <li>洋葱</li>
  <li>大蒜</li>
</ul>
// good
document.querySelector('ul').onclick = (event) => {
  let target = event.target
  if (target.nodeName === 'LI') {
    console.log(target.innerHTML)
  }
}
// bad
document.querySelectorAll('li').forEach((e) => {
  e.onclick = function() {
    console.log(this.innerHTML)
  }
})
  • 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反
//阻止事件冒泡:
 window.event.cancelBubble = true||event.stopPropagation();
  • 注意:,如果元素被阻止冒泡了,千万别去用事件委托的方式监听事件,因为事件委托的原理是利用事件冒泡,当冒泡被阻止,就无法监听了

     			--->这个城市下雨了;久别重逢的调调;(Missing)
    

生活很好,记得抱抱

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

肥猫不是喵

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值