事件委托应使用closest()向上查找语义容器，避免直接匹配e.target；推荐用data-*属性解耦结构与逻辑；对装饰性元素设pointer-events:none实现点击穿透；区分e.target与e.currenttarget，数据读取和事件控制均基于closest()结果。
事件委托遇到子元素内部嵌套复杂（比如按钮里有 <i></i>、<span></span>、图片、文字节点甚至伪元素）时，e.target 往往指向最内层的节点，而不是你真正想操作的业务单元（如整个按钮、列表项或卡片）。这不是 target “错了”，而是你没用对方式定位语义目标——关键在于放弃直接匹配 e.target，转而向上查找有业务意义的容器。
用 closest() 一步锁定语义容器
无论用户点的是图标、文字、空白区域还是某个深层 <div>，只要它属于某个可交互业务块，<code>closest() 就能精准捕获这个块：
-
推荐写法：
const btn = e.target.closest('.like-btn');或const item = e.target.closest('[data-role="list-item"]'); -
它会自动检查：从
e.target自身开始，逐级向上找第一个匹配选择器的祖先（包括自己），找不到则返回null -
避免硬判断：不要用
e.target.className === 'like-btn'或多次parentNode链式调用——结构一变就失效，且 class 多值、动态增删都会导致误判
用 data-* 属性解耦结构与逻辑
当 class 名复用率高、主题切换频繁，或组件被 SSR/微前端渲染时，仅靠 class 匹配容易冲突。给业务容器打上明确的语义标记更可靠：
- 在 HTML 中加属性：
<div data-role="card" data-id="456"><button><i class="icon-trash"></i></button></div> - JS 中统一识别：
const card = e.target.closest('[data-role="card"]');，再取card?.dataset.id - 优势明显：不依赖样式类名、支持自动化测试定位、便于跨框架通信
控制 pointer-events 让装饰性元素“透”过去
对纯视觉辅助的子元素（如图标、头像、分隔线），可主动禁用其事件响应，让点击穿透到父容器，减少判断负担：
- CSS 示例：
.card i.icon, .card .avatar { pointer-events: none; } - 只用于无独立交互的装饰节点；删除按钮、开关等有功能的子控件不能设
none - 慎用全局规则（如所有
span），可能影响可访问性或破坏其他逻辑
区分 target 和 currentTarget，别混淆源头和监听位置
e.target 是你实际点中的那个 DOM 节点，e.currentTarget 才是你绑定事件的那个父容器（比如 ul 或 form）。很多误判源于把两者混为一谈：
- 处理逻辑前先做空值检查：
if (!e.target.closest('.action-btn')) return; - 需要读取数据时，始终从
closest()返回的元素上取，而不是直接读e.target.dataset - 若需阻止冒泡，只在明确已处理且不希望外层再响应时调用
e.stopPropagation()，避免影响模态框关闭等依赖冒泡的功能
