高效事件委托应将监听器挂载到最近公共父容器，用 closest() 精准获取目标元素，通过 data-action 统一分发行为，避免正则匹配和重复 dom 查询。
别把事件委托挂到 body 上再做正则匹配——这既慢又危险。真正高效的做法，是让判定逻辑轻量、精准、靠近目标。
用 closest() 替代层层遍历 + 正则
event.target.closest('button[data-action]') 一行就能拿到业务目标元素，无需手动向上查 parentNode、也不用对 nodeName 或 className 做字符串拆解和正则 test()。它内部基于 DOM 结构匹配，语义清晰、性能稳定，且天然跳过文本节点、注释等干扰项。
- 避免写类似
/(btn|action|delete)-\w+/i.test(target.className)这类易错又难维护的正则 - 如果需兼容旧版 IE，可用
matches()+ 循环模拟，但不推荐 fallback 到正则匹配 class 字符串 - data 属性（如
data-action="submit"）比 class 更可控，不会被 CSS 框架或动态样式意外修改
把委托层级压到最近公共父容器
委托对象不是越“高”越好。body 是兜底容器，但也是最差选择：所有点击都得冒泡上来，再执行一长串判断逻辑。应定位到业务上真正共用的容器，比如 #user-list、.modal-footer 或 .toolbar。
- 冒泡路径缩短，中间节点不触发无关判断
- 事件处理器只响应自己管辖范围内的操作，天然隔离其他区域逻辑
- 即便页面有多个同类模块（如两个独立表格），也能各自委托、互不干扰
用 data-action 分流，不靠 if-else 堆条件
与其在回调里写十几个 if (target.matches(...)) 或正则分支，不如统一提取 target.dataset.action，再查表分发：
- 提前定义行为映射：
const handlers = { save: onSave, delete: onDelete, edit: onEdit }; - 执行时只需：
const action = target.dataset.action; if (handlers[action]) handlers[action](target); - 新增功能只需加一条映射，不碰主逻辑，也避免条件判断越来越臃肿
避免在回调里重复做 DOM 查询或计算
委托回调是高频入口，每次点击都执行。像 document.querySelector('.status-badge') 或 new Date().toISOString() 这类操作，不该放在这里。
- 静态选择器可提前缓存：
const badgeSelector = '.status-badge'; - 时间戳、配置项等不变数据，在监听器外初始化，回调中只读取
- 复杂计算尽量前置（如解析 data-id、格式化参数），别在点击瞬间做
