事件委托中event.target可能指向文本节点而非目标元素，应使用e.target.closest()、instanceof element判断或parentelement获取安全的目标元素。
在事件委托中，点击子元素内部的文本（比如按钮里的文字）时，event.target 会指向那个文本节点（Text Node），而不是你期望的 button 元素——这会导致判断失败或逻辑出错。这不是 bug，而是 DOM 的正常行为，但必须主动处理。
为什么 target 会变成文本节点
HTML 中的文字内容属于文本节点，它和元素节点是平级的 DOM 节点类型。当你点击按钮内的文字，实际交互目标就是那个 Text 节点，所以 event.target 就是它。此时：
-
e.target.nodeType是3（Node.TEXT_NODE） -
e.target.tagName是undefined -
e.target.matches('button')直接报错或返回 false
推荐的三种安全获取目标元素方式
不要依赖 e.target 直接做标签判断，应向上查找或先过滤：
- 用
e.target.closest('button')—— 最简洁可靠，自动从当前节点向上找最近匹配的 button 元素，哪怕点的是文字、图标或 span 内容都适用 - 先判断是否为元素节点：
if (e.target instanceof Element)或e.target.nodeType === Node.ELEMENT_NODE，再继续判断 tagName 或 class - 用
e.target.parentElement获取父元素后判断（适合结构固定、且目标一定在直接父级的情况）
实际写法对比
错误写法（易崩）：
if (e.target.tagName === 'BUTTON') { ... }
正确写法（推荐）：
const btn = e.target.closest('button');<br>if (btn) {<br> console.log('点中了按钮:', btn.dataset.id);<br>}
如果需要兼容老浏览器（如 IE11），可用 polyfill 或回退到 parentElement + matches 组合。
顺便注意：别在委托逻辑里混用 this 和 target
在事件委托回调中，this 和 e.currentTarget 都指向绑定事件的父元素（比如 ul），而 e.target 才是真实点击处。混淆它们会导致取错数据或样式操作错对象。需要操作被点击项时，只依赖 e.target 或其 closest 结果，不要默认 this 就是目标。
