高效事件委托应将监听器挂载到最近公共父容器，用 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、格式化参数），别在点击瞬间做