应优先用 closest() 定位业务容器，再用 matches() 做精细校验；e.target.matches() 易失败因点击点不在目标标签上，closest() 可确保无论点击内部何处都准确定位语义父级，再用 matches() 校验状态更可靠。
用 matches() 做条件判断，但别只盯 e.target
事件委托中，e.target 是实际被点击的最深节点——可能是按钮里的文字、图标或空 div。直接写 e.target.matches('.btn.save') 很容易返回 false，因为点击点根本不在按钮标签上。matches() 本身没错，错在把“目标元素”当成了“业务目标元素”。它只验证当前元素是否匹配选择器，不负责找“最近那个该响应的容器”。
优先用 closest() 定位业务容器，再用 matches() 做精细校验
真正要响应的，往往是某个功能区块（比如一个卡片、一个列表项、一个操作按钮），而不是某次点击落点。所以第一步应向上查找：e.target.closest('.card') 或 e.target.closest('button[data-action]')。
这样无论用户点标题、图片还是内部 span，都能准确定位到语义正确的父级容器。
拿到容器后，再用 matches() 做二次确认更稳妥：
- 确保它确实具备所需状态，例如：
card.matches('.card.active:not([data-pending])') - 排除临时禁用或加载中的情况，比单纯查 classList 或属性更简洁可靠
- 避免因 DOM 结构微调（如多包一层 div）导致判断逻辑失效
组合使用时注意选择器语义和浏览器兼容性
matches() 支持标准 CSS 选择器，但有几点必须留意：
- 不支持
:hover、:focus等依赖运行时状态的伪类——它们在事件回调里无法准确反映用户真实交互状态 - 支持
:enabled、:disabled、:checked等反映元素当前属性的状态伪类，可用 - IE9+ 原生支持；若需兼容 IE8，可用
document.querySelectorAll(selector)遍历比对节点引用模拟 - 选择器越具体，性能开销略增，但日常业务中差异可忽略；比起多次读取 classList/attributes，matches() 反而更稳定
动态内容与事件生命周期也要同步管理
事件委托天然适配动态插入的子元素，但别忘了清理：
- 组件卸载或模块销毁时，移除 document 或父容器上的监听器，防止内存泄漏
- 避免重复绑定同一监听器（尤其在 SPA 路由切换或组件反复挂载时）
- 如果监听器内需访问外部数据（如 React state 或 Vue ref），确保闭包引用正确，必要时用最新值重绑定
