事件代理,什么时候用,发生在事件处理流程的那个阶段,有什么好处

事件代理就是说我们将事件添加到本来要添加事件的父节点，将事件委托给父节点来触发处理函数，这通常会在 这通常会使用在大量的同级元素需要添加同一类事件的时候，比如一个动态的非常多的列表，需要为每个列表项都添加 点击事件，这时可以使用事件代理，通过判断e.target.nodeName来判断发生的具体元素，从而判断是否是在 列表项中触发，这样的好处是可以减少事件绑定，同时动态的DOM结构仍然可以监听。事件代理发生在冒泡阶段。

补充

补充：事件代理（事件委托）依赖事件冒泡机制，将监听器挂到祖先节点，通过 event.target 判断真正被触发的子元素。常见使用场景：

• 列表/表格中大量相似子元素需要同类事件（如点击、键盘）；
• 元素动态增删，不需要反复重新绑定；
• 减少监听器数量，提升性能与内存占用。

实现要点：通常判断 e.target.matches('selector') 或 nodeName；对不冒泡的事件（focus、blur 等）需要用 focusin/focusout 或 capture: true。

list.addEventListener('click', function (e) {
  const item = e.target.closest('li')
  if (!item) return
  console.log('点击了:', item.textContent)
})

来源整理自：vue3js.cn 面试官系列