事件委托通过事件冒泡将监听器绑定在父元素，用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() 就足够且高效。
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
和 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"，再统一处理。
