event.target.matches()可精准判断点击是否属于目标元素，避免直接用tagname或classname出错；配合closest()更稳妥，且需加instanceof element校验以防文本节点报错。
在事件委托中，event.target 是获取实际点击元素的起点，但它可能指向文本节点、图标、span 或深层嵌套子节点——直接用它做逻辑判断容易出错。配合 matches() 方法，就能安全、精准地判断这个点击是否“属于你关心的目标元素”。
为什么不能只靠 event.target.tagName 或 className？
比如点击一个带图标的按钮：<button class="del"><i class="icon-trash"></i> 删除</button>，event.target 可能是 <i></i> 标签，此时 target.tagName === 'BUTTON' 为 false，target.className 也拿不到 'del'。手动向上遍历 parentNode 写起来啰嗦，还容易漏判或越界。
用 matches() 做声明式匹配
event.target.matches(selector) 接收一个 CSS 选择器字符串（如 'button.del'、'li[data-id]'），返回 true 表示该元素自身满足条件（不查找祖先）。它是现代浏览器原生支持的简洁方案：
-
e.target.matches('button')→ 匹配任意 button 元素 -
e.target.matches('button[data-action="delete"]')→ 精准匹配带特定 data 属性的按钮 -
e.target.matches('.item, .item > *')→ 匹配 item 元素本身，或其直系子元素（适合宽松点击区域）
更稳妥：target.closest() + matches() 组合使用
如果希望点击内部任意位置（包括空白、文字、图标）都算作“点中目标”，推荐先用 closest() 找到最近的容器，再用 matches() 校验：
const btn = e.target.closest('button');if (btn && btn.matches('[data-role="submit"]')) { ... }
这样既避免了 target 指向太深的问题，又保留了选择器的灵活性和可读性。IE9+ 兼容，无需 Polyfill（当前项目基本无兼容压力）。
注意边界情况
不是所有元素都支持 matches() —— 如果 e.target 是文本节点、注释节点或 SVG 元素（某些旧环境），调用会报错。加一层类型判断更健壮：
if (e.target instanceof Element && e.target.matches('.action-btn')) { ... }- 或者直接用
closest()，它只对 Element 类型有效，天然跳过非法节点
