事件委托通过事件冒泡将监听器绑定在父元素，用matches()或closest()精准匹配目标元素；matches()判断事件目标自身是否匹配选择器，closest()则向上查找最近匹配祖先，后者更鲁棒。
事件委托利用事件冒泡机制，把事件监听器绑定在父元素上，再根据实际点击的目标来决定是否执行逻辑。其中 matches() 是判断目标元素是否符合某个 CSS 选择器的最直接、推荐的方式。
用 matches 判断目标是否匹配特定选择器
event.target.matches(selector) 返回布尔值，表示当前触发事件的元素（event.target）是否匹配传入的选择器字符串。它比手动遍历 classList 或 tagName 更简洁、语义更清晰。
- 支持复杂选择器：如
"button[data-action='delete']"、".item a"、"[data-id]" - 不依赖元素层级或属性顺序，和浏览器原生样式匹配规则一致
- 兼容性好（IE9+，现代项目基本无需考虑降级）
典型写法示例
假设有一个待办列表，点击删除按钮才触发删除逻辑：
document.getElementById('todo-list').addEventListener('click', function (e) {
if (e.target.matches('button.delete-btn')) {
const id = e.target.dataset.id;
deleteTodo(id);
}
});
注意：e.target 是真正被点击的元素（可能是 <span></span> 或 <i></i> 子元素），所以更稳妥的做法是先用 closest() 向上找最近的匹配祖先，但若明确只响应“直接点击按钮本身”，matches() 就足够且高效。
和 closest 的配合使用（处理子元素点击）
如果按钮内有图标或文字，用户可能点在子元素上，此时 e.target 不是 button，matches() 会返回 false。这时应改用 e.target.closest('button.delete-btn') 获取匹配的按钮元素。
-
matches()：检查目标自身是否匹配 -
closest()：从目标自身开始向上查找，返回第一个匹配的祖先（含自己） - 多数场景推荐
closest()，更鲁棒；仅当必须限定“只能点在该元素本身”时才用matches()
避免常见错误
不要用 nodeName 或 className 拼字符串去模拟匹配，既难维护又易出错：
- ❌
e.target.nodeName === 'BUTTON' && e.target.className.includes('delete-btn') - ✅
e.target.matches('button.delete-btn')或e.target.closest('button.delete-btn')
也不要在循环中反复调用 matches() 做多条件判断；可合并为一个选择器，例如 "button.delete-btn, button.edit-btn"，再统一处理。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
