事件委托通过绑定父元素监听器并利用event.target识别触发源，需过滤非元素节点、用matches()或closest()精准匹配目标，排除干扰子元素，确保兼容性。
事件委托利用事件冒泡机制，把事件监听器绑定在父元素上，通过 event.target 获取实际触发事件的子元素。关键在于区分 target（真正点击的元素）和 currentTarget（绑定事件的父元素），并正确处理文本节点、后代嵌套等常见情况。
识别真正的触发元素（target）
event.target 始终指向用户直接交互的那个最内层 DOM 元素，比如点击按钮时是 <button>，点击按钮内文字时可能是 <span> 或文本节点。注意：它不一定是你期望的“目标标签”，可能更深层或更浅层。
- 用
event.target.nodeType === Node.ELEMENT_NODE过滤掉文本节点、注释等非元素节点 - 用
event.target.matches('你的选择器')判断是否符合预期类型（如event.target.matches('.item-btn')） - 避免直接用
tagName或className判断，因为不够灵活且易出错
向上查找最近匹配的祖先元素（常用场景）
如果点击的是子元素内部的图标、文字或空白区域，而你只想响应整个列表项的点击，就需要从 target 向上查找最近的符合条件的祖先元素。
- 使用
event.target.closest('selector')—— 它会返回自身或最近的匹配祖先，返回null表示没找到 - 例如：
const item = event.target.closest('.list-item');，无论点在 item 内的span、img还是空白处，都能拿到对应.list-item - 配合条件判断：
if (item) { /* 处理该 item */ }，避免对null操作
避免误触发：排除非目标子元素
有时需要排除某些内部元素（如删除按钮、开关）不触发主逻辑，只让容器区域响应。
立即学习“Java免费学习笔记（深入）”；
- 先获取目标元素（如
closest('.card')），再检查event.target是否属于被排除的类：event.target.matches('.delete-btn') - 也可在事件处理开头加守卫：
if (event.target.matches('.ignore-click')) return; - 注意：不要只靠
event.target === someElement，因为 DOM 结构可能动态变化
兼容性与健壮写法示例
一个典型的安全委托写法：
document.querySelector('.list').addEventListener('click', function (e) {
// 跳过非元素节点
if (e.target.nodeType !== Node.ELEMENT_NODE) return;
<p>const btn = e.target.closest('.action-btn');
if (btn) {
const id = btn.dataset.id;
console.log('操作按钮被点击，ID:', id);
return;
}</p><p>const card = e.target.closest('.list-item');
if (card) {
console.log('列表项被点击');
}
});注意：closest() 在 IE 中不支持，如需兼容可手写向上遍历，或引入 polyfill。
