Javascript中的事件委托是什么?

admin 百科 13
事件委托是利用事件冒泡机制,将子元素事件统一交由父元素处理,避免重复绑定;通过event.target识别实际触发元素,适用于动态列表、大量节点等场景。

Javascript中的事件委托是什么?-第1张图片-佛山资讯网

事件委托,也叫事件代理,是把子元素的事件处理“交给”父元素来统一响应的一种做法。核心不是给每个子元素单独绑事件,而是只在它们共同的父元素上监听一次,靠事件冒泡机制自动捕获子元素触发的动作。

它靠的是事件冒泡

点击一个 li 元素时,事件会先在这个 li 上发生,然后一层层往上传——经过 ulpbody,直到 document。这个向上传递的过程就是冒泡。事件委托就卡在这个环节,在父元素(比如 ul)上等着,看谁冒上来的。

  • 不需要手动给每个新添加的 li 再绑 click
  • 不用循环遍历所有子元素去 addEventListener
  • 页面动态增删列表项时,逻辑依然有效

关键靠 event.target 判断是谁点的

父元素监听到事件后,并不知道具体是哪个子元素被点了。这时候要读取事件对象的 target 属性:

  • event.target 是真正被点击的那个元素(比如某个 li 或里面的 span
  • 常用判断方式:if (e.target.tagName === 'LI')e.target.classList.contains('item')
  • 注意别误用 currentTarget——那是你绑定事件的那个父元素

适合这些情况

不是所有场景都得用,但下面几种特别合适:

标签: javascript java js 事件冒泡 ssl ai

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~