e.target 和 e.currentTarget 有什么区别？

结论：

• e.target —— 事件最初发生的真实元素（事件的发起者）。

• e.currentTarget —— 当前正在处理事件监听器的元素（事件绑定所在的元素）。

示例

<div id="box">
  <button id="btn">Click</button>
</div>

<script>
  const box = document.getElementById('box');
  box.addEventListener('click', function (e) {
    console.log('e.target:', e.target);           // 实际被点击的元素（可能是 button）
    console.log('e.currentTarget:', e.currentTarget); // 绑定监听器的元素（box）
  });
</script>

点击 button 时输出：

• e.target → <button id="btn">

• e.currentTarget → <div id="box">

常见场景与要点

• 事件冒泡/捕获过程中，e.target 始终指向事件的起点（最底层触发元素）；e.currentTarget 随着事件在各层的处理器中变化，总是指向当前处理该事件的元素。

• 在事件委托（把监听器放在父元素上以处理子元素事件）中，通常用 e.target 确定哪个子元素触发，再用 e.currentTarget 知道事件是在哪个父元素上处理的。

• 如果监听器绑定在元素自身并且该元素被触发，二者相等：e.target === e.currentTarget。

注意事项

• e.target 可能是文本节点或子元素，也可能是用户认为“被点击的子元素”的更深层节点；常结合 e.target.closest(selector) 或 Node.matches() 做稳定匹配。

• e.currentTarget 在箭头函数中仍然正确指向绑定元素（它来自事件系统，而不是函数的 this 行为）。如果使用函数声明并依赖 this，this === e.currentTarget（非箭头函数中）。

速记

• target = 谁发起的（谁被点）

• currentTarget = 谁在处理（事件监听器挂在哪里）