事件委托通过冒泡机制将监听绑定父元素，用matches()校验event.target是否匹配选择器（需先判断instanceof Element），或用closest()查找匹配祖先；条件需互斥防重复触发。
事件委托利用事件冒泡机制，把事件监听绑定在父元素上，再通过 matches() 方法精准判断目标元素是否符合特定条件，从而决定是否执行处理逻辑。关键在于：不是所有子元素都要响应，只对满足 CSS 选择器条件的元素触发行为。
用 matches() 做目标校验
在事件回调中，用 event.target.matches(selector) 检查点击的是否是“真正想响应”的元素。它返回布尔值，比手动比对 tagName、className 或 dataset 更简洁可靠。
-
event.target是实际被点击的最深子元素（可能是个span、i或文本节点） -
matches()支持任意合法 CSS 选择器，如"button"、".btn.delete"、"[data-action='edit']" - 注意：如果
event.target是文本节点或非元素节点，matches()会报错，需先做node instanceof Element判断
安全调用 matches 的写法
避免因目标不是元素而崩溃，推荐封装一层校验：
parent.addEventListener('click', (e) => {
const target = e.target;
if (!(target instanceof Element)) return;
if (target.matches('.item-edit')) {
handleEdit(target);
} else if (target.matches('[data-action="remove"]')) {
handleRemove(target);
}
});
也可以用可选链（ES2020+）简化：target.matches?.('.item-edit')，但兼容性需考虑。
将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。
立即学习“Java免费学习笔记（深入）”；
匹配祖先元素（当点击在子节点内部时）
有时用户点的是按钮里的图标或文字，event.target 是子元素，但你想按按钮本身匹配。这时可用 closest() 替代 matches()：
-
e.target.closest('.card-button')向上查找最近的匹配祖先 - 它天然跳过非元素节点，更鲁棒
- 适合“只要在某个组件内点击，就视为触发该组件行为”的场景
例如：const btn = e.target.closest('button[data-role="action"]');，拿到后即可取 btn.dataset.role 或执行对应逻辑。
避免重复响应和误判
多个 matches() 条件之间要有互斥性，否则可能意外触发多次：
- 不要同时写
.btn和button，后者会命中前者的所有实例 - 优先用带语义的 class 或 data 属性，比如
[data-type="save"]比button更精确 - 必要时用
e.stopPropagation()阻止事件继续向上冒泡（慎用，通常不需要）
