事件委托的本质是利用事件冒泡机制，将监听器绑定在祖先元素上，通过event.target判断实际触发目标。它天然支持动态添加的元素，应选择最近稳定父容器，用matches()或closest()精准匹配，并注意事件冒泡兼容性与preventDefault()的正确时机。
事件委托的本质是利用事件冒泡机制
事件委托不是一种独立的事件类型，而是把事件监听器绑定在父元素上，依靠 event.target 判断真正触发事件的子元素。浏览器原生支持事件冒泡，点击子元素时，事件会逐级向上触发父元素的监听器——这正是事件委托能工作的底层前提。
常见错误是误以为必须用 addEventListener 绑定到 document 或 body 才算委托，其实只要监听的是祖先元素（哪怕只是最近的 ul），且通过 event.target 做判断，就属于事件委托。
动态添加的元素天然适配事件委托
当页面中频繁增删 DOM 节点（比如列表项由 AJAX 加载、表格行实时更新），如果为每个新元素单独调用 addEventListener，不仅代码冗余，还容易漏绑或重复绑定。事件委托完全规避这个问题：只要父容器监听器存在，所有后代元素（包括未来插入的）都能响应事件。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 优先选择离目标元素最近的稳定父容器（如
ul、div.list-container），避免监听过高层级（如document）导致不必要的冒泡开销 - 用
event.target.matches(selector)安全判断目标是否符合预期，比手动遍历parentNode更简洁可靠 - 注意过滤文本节点或非交互元素：点击
span内文字时event.target可能是其内部的Text节点，matches()会自动处理这类情况
避免在委托回调里频繁查询 DOM
性能损耗常来自回调函数内部反复调用 document.querySelector 或遍历 parentNode。委托本意是减少监听器数量，但如果每次点击都重新查一遍结构，就抵消了优势。
正确做法是直接从 event.target 向上找符合条件的祖先，或用 closest()：
const list = document.getElementById('my-list');
list.addEventListener('click', (e) => {
const item = e.target.closest('li');
if (item) {
console.log('点击了列表项:', item.dataset.id);
}
});
对比错误写法：document.querySelectorAll('li').forEach(...) 在回调里执行——这既没利用冒泡，又重复查询，完全违背委托初衷。
注意事件类型兼容性与阻止默认行为的时机
不是所有事件都支持冒泡。例如 focus、blur、load 默认不冒泡，需改用 focusin/focusout（后者是冒泡版）。另外，若在委托回调中调用 e.preventDefault()，必须确保它作用在真正需要拦截的元素上，而不是父容器本身。
典型陷阱：
- 给
a标签委托点击事件后，在回调里直接e.preventDefault()，结果所有点击都被阻止——应先用matches('a')精确判断再阻止 - 监听
input事件委托时，发现无法捕获输入内容变化：因为input事件确实冒泡，但它的event.target是输入框本身，委托有效；而change事件只在失焦时触发且也冒泡，但语义不同，别混淆 - 移动端需额外处理
touchstart替代click，避免 300ms 延迟，且注意touchstart不会冒泡到document外部
委托真正省的是监听器数量和绑定开销，不是 DOM 查询逻辑。写错判断条件或滥用 closest() 查太深，照样拖慢响应。
