事件委托的核心是利用事件冒泡，将监听器绑定在父元素上，通过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 不是你预期的元素。更稳妥的做法是选一个稳定存在的、离目标最近的静态父容器。
- 如果列表用
<ul id="item-list">包裹，就用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() 的陷阱。稍不注意，就会出现“点不动”“点错对象”“删了不该删的”这类问题。 
