推荐用 element.matches() 配合映射表替代冗长 if-else 判断：matches 支持 css 选择器语法，可精准识别目标元素；映射表将选择器与处理函数解耦，提升可读性与可扩展性；注意配合 instanceof element 校验和可选链确保安全。
在事件监听器里直接用 if-else 判断 event.target 的节点类型或类名，容易写成一长串嵌套、难维护的逻辑。用 Element.matches() 配合映射结构，能让判断更声明式、更易读、更易扩展。
用 matches 做精准目标识别
matches() 支持 CSS 选择器语法，能一次性判断元素是否匹配复杂条件，比如：button[data-action="save"]、.menu-item.active、[role="tab"][aria-selected="true"]。它比手动检查 className、dataset、getAttribute 组合清晰得多。
- 避免写
if (el.tagName === 'BUTTON' && el.classList.contains('submit') && el.dataset.type === 'form') - 直接写
if (el.matches('button.submit[data-type="form"]')) - 一行表达完整语义，且浏览器原生支持（IE9+）
搭配动作映射表，彻底解耦判断与行为
把匹配规则和对应处理函数组织成键值对，监听器只负责“查表执行”，不掺杂业务逻辑：
- 定义映射对象，键是 CSS 选择器，值是处理函数
- 遍历映射表，对
event.target调用matches(key) - 第一个匹配成功的就执行，然后
return或break - 可加兜底项（如
'*'或'body'）处理未覆盖情况
const handlers = {
'button[data-action="save"]': () => saveForm(),
'a[href^="/user/"]': (e) => { e.preventDefault(); loadUser(e.target.href) },
'.delete-btn': deleteItem,
'input[type="checkbox"].bulk-select': toggleBulkSelection,
};
element.addEventListener('click', (e) => {
for (const [selector, handler] of Object.entries(handlers)) {
if (e.target.matches(selector)) {
handler(e);
return;
}
}
});
支持组合与排除，减少重复判断
matches() 天然支持伪类和逻辑组合，能优雅处理“非某类”“仅在某容器内”等场景：
-
e.target.matches('.card button:not([disabled])')—— 只响应启用状态的按钮 -
e.target.matches('nav a')—— 限定在导航区域内的链接 -
e.target.matches(':is(button, a)[data-confirm]')—— 按钮或链接只要带确认属性就触发 - 不用再写
if (hasClass && !isDisabled && isInNav)这类拼接条件
注意边界：matches 不做类型校验，需配合安全访问
matches() 只判断样式匹配，不保证元素存在或属性可读。实际使用时建议：
- 始终用
e.target instanceof Element做基础防护（尤其防文本节点） - 属性访问用可选链
e.target.dataset.action?.toLowerCase() - 避免在
matches()中依赖可能为null的属性，如[data-id]比[data-id="123"]更健壮 - 若需强类型约束（如必须是
<input>），可额外加el.tagName === 'INPUT'，但多数场景matches('input')已足够
