用 matches 而不是直接判断 class 或 tagname，因其支持完整 css 选择器语法（如 .btn[data-type="submit"]、li:nth-child(odd)），更灵活可靠，且避免父元素误匹配。
在事件委托中用 matches 方法过滤目标，核心是：在事件监听器里对 event.target 调用 matches(selector)，只对符合 CSS 选择器的元素执行逻辑。
为什么用 matches 而不是直接判断 class 或 tagName
matches 支持完整 CSS 选择器语法（如 .btn[data-type="submit"]、li:nth-child(odd)），比手动查 className、getAttribute 或 nodeName 更灵活、更可靠，也避免了父元素意外匹配的问题。
基本写法：绑定到父容器，用 matches 判断目标
假设要代理点击所有带 .item 类的子元素：
<pre class="brush:php;toolbar:false;">document.getElementById('list').addEventListener('click', function (e) {
if (e.target.matches('.item')) {
console.log('点中了一个 item:', e.target);
// 执行业务逻辑
}
});
注意边界情况和兼容性处理
-
确保 target 是元素节点：文本节点、注释节点没有
matches 方法，建议先用 <code>e.target.nodeType === 1过滤，或直接用e.target instanceof Element -
IE 不支持 matches：可用
msMatchesSelector回退，或封装一个兼容函数：
<pre class="brush:php;toolbar:false;">function elementMatches(el, selector) {
return el.matches
? el.matches(selector)
: el.msMatchesSelector && el.msMatchesSelector(selector);
}
然后在事件处理器中调用 elementMatches(e.target, '.action-btn')。
进阶技巧：用 closest 配合 matches 实现“向上找最近匹配”
如果想让点击子元素（比如按钮里的图标）也能触发，但只关心它是否在某个可操作区域里，可以用 closest：
<pre class="brush:php;toolbar:false;">list.addEventListener('click', function (e) {
const btn = e.target.closest('.btn');
if (btn && btn.matches('[data-role="delete"]')) {
handleDelete(btn.dataset.id);
}
});
这样即使点的是 <i class="icon-trash"></i>，也能正确捕获外层带 data-role="delete" 的按钮。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
