事件委托为何高效？如何减少监听器？

绑1次click，靠事件冒泡机制捕获目标，监听器数量从100降到1。
• 原方式：每个子元素独立监听 → 内存占用高、初始化慢、管理麻烦
• 委托方式：父元素统一监听 → 内存少、初始化快、无需关心后续新增元素

利用事件冒泡自动响应新元素

DOM节点动态添加后（比如AJAX加载新列表项），传统方式得重新遍历并绑定事件；事件委托不用管——只要新元素在父容器内、能触发冒泡，父元素的监听器就能自然捕获它。

• 新增
• ？不用额外绑定
• 删除
• ？也不用解绑，没副作用
• 适合单页应用、无限滚动、实时聊天等场景

实际写法很简单：判断event.target

核心就是监听父元素，再用event.target识别真正被点击的是哪个子元素：

document.querySelector('ul').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('点中了列表项：', e.target.textContent);
  }
});

• 注意用e.target（触发事件的原始元素），不是this或e.currentTarget
• 可用closest()方法匹配更灵活的选择器，比如e.target.closest('.btn-delete')
• 避免监听太顶层（如document），否则可能误触发或影响其他逻辑

基本上就这些。不复杂但容易忽略——关键不在“怎么写”，而在“为什么只绑一次就管用”。本质是浏览器自带的冒泡机制+JS的动态判断能力，省事又稳健。

以上就是《事件委托为何高效？如何减少监听器？》的详细内容，更多关于的资料请关注golang学习网公众号！