17370845950

事件委托的核心是利用事件冒泡，将监听器绑定在父元素上，通过event.target.matches()精准识别触发源，避免动态元素失效和stopPropagation()导致的委托中断。

事件委托的核心是利用事件冒泡，把监听器绑定在父元素上

你不需要给每个子元素单独加 addEventListener，尤其当子元素动态增删频繁时——直接绑在父容器上更可靠、内存占用更低。关键在于判断 event.target 是否匹配你关心的元素，而不是依赖 this 或闭包捕获的节点引用。

• 必须用 event.target（触发事件的实际元素），不是 event.currentTarget（监听器绑定的父元素）
• 推荐用 element.matches(selector) 判断是否命中目标，比如 event.target.matches('button.delete')
• 避免用 className 或 tagName 硬比对，容易漏掉多类名或大小写问题

动态添加的按钮点击失效？检查事件监听是否绑在了正确父级

常见错误是把委托监听器加在 document 或 body 上，看似“一劳永逸”，实则可能被其他脚本拦截、或因 CSS pointer-events: none 导致 event.target 不是你预期的元素。更稳妥的做法是选一个稳定存在的、离目标最近的静态父容器。

• 如果列表用
  包裹，就用 document.getElementById('item-list') 绑监听器
• 确保该父容器在脚本执行时已存在于 DOM 中（不要在 DOMContentLoaded 之前操作）
• 避免委托到 document 后又用 stopPropagation() 阻断冒泡，会导致委托失效

event.preventDefault() 和 event.stopPropagation() 的影响要分清

在委托回调里调用 event.stopPropagation() 会阻止事件继续向上冒泡，这会干扰其他同级或更高层的委托监听器；而 event.preventDefault() 只影响默认行为（如表单提交、链接跳转），和冒泡无关。

• 仅需阻止默认行为时，只用 event.preventDefault()
• 除非明确知道没有其他监听器依赖该事件冒泡，否则别轻易用 event.stopPropagation()
• 调试时可在控制台打印 event.bubbles 确认事件是否支持冒泡（多数原生事件都支持，但自定义事件默认不冒泡）

document.getElementById('item-list').addEventListener('click', function (event) {
  if (event.target.matches('button[data-action="delete"]')) {
    event.preventDefault(); // 阻止链接跳转或按钮默认行为
    const itemId = event.target.dataset.id;
    deleteItem(itemId);
  }
});

事件委托真正难的不是写法，而是准确预判事件路径、识别真实触发源、以及在复杂嵌套结构中避开 stopPropagation() 的陷阱。稍不注意，就会出现“点不动”“点错对象”“删了不该删的”这类问题。