event.target 是实际被点击的最深元素，event.currentTarget 是事件监听器绑定的元素；事件委托中须用 currentTarget 操作容器，用 target 判断点击意图并查找最近有效节点。

点击事件中，event.target 是真正被点击的元素（最深的冒泡起点），而 event.currentTarget 是当前绑定事件监听器的那个元素（即 addEventListener 所在的对象）。两者常不同——尤其在事件委托场景下，精准区分它们是避免逻辑错位的关键。

理解两者的本质差异

event.target 指用户鼠标/手指实际落点的 DOM 节点，它不会因监听器挂在哪而改变；event.currentTarget 则始终等于当前回调函数执行时所依附的监听目标节点，也就是你调用 .addEventListener() 的那个元素。

• 即使子元素被点击，只要监听器绑在父容器上，currentTarget 就是父容器，target 却可能是其任意后代
• 在事件捕获或冒泡阶段，currentTarget 可能随阶段变化（如捕获时指向祖先，冒泡时指向监听器所在元素），但通常我们监听默认冒泡阶段，此时 currentTarget 稳定为绑定监听的元素
• 如果监听器直接绑在被点击的元素上（无委托），二者值相同——但这属于特例，不能当作通用假设

事件委托中必须用 currentTarget 定位绑定容器

当用一个父级监听多个子项（如列表项、按钮组）时，业务逻辑往往需要操作整个容器（比如高亮整行、关闭卡片），而非仅响应被点中的文字或图标。

• 错误做法：target.classList.add('active') → 可能只给 span 或 i 标签加 class，样式失效
• 正确做法：currentTarget.classList.add('active') → 确保作用于监听器所在的 li 或 div 容器
• 若需同时获取容器和具体点击子元素，可组合使用：const item = event.currentTarget; const clickedEl = event.target;

用 target 判断真实触发意图，避开装饰节点

按钮内常含图标、文字、空格等非交互语义节点。用户点击空白处或图标时，target 可能不是 button 本身，而是其子元素。此时需判断是否“有效点击”：

• 检查 event.target.matches('button, button > *, .btn-control') 等选择器，确认点击落在可操作区域
• 用 event.target.closest('button') 向上查找最近的按钮，比反复判断 parentNode 更健壮
• 避免直接对 target 调用 click() 或 focus()，除非你明确要操作那个子节点

调试技巧：快速验证两者的值

开发中一时分不清？在事件回调里加一句：

console.log('target:', event.target, 'currentTarget:', event.currentTarget);

点击后展开 DOM 节点，对比高亮位置：target 高亮实际点击处，currentTarget 高亮监听器绑定处。多试几次不同位置（文字、边距、图标），规律立刻清晰。