e.target 和 e.currentTarget 的区别

在前端开发中，e.target 和 e.currentTarget 是事件对象（Event）中两个常用的属性，它们的主要区别在于指向的元素不同，具体如下：

1. e.target

• 定义：指向触发事件的具体元素（事件的实际发源地）。
• 特点：如果事件经过了冒泡，e.target 始终是最内层的、实际被点击（或触发）的元素。

2. e.currentTarget

• 定义：指向当前正在处理事件的元素（即绑定了事件监听器的元素）。
• 特点：与 this（在普通函数中）指向相同，始终是绑定事件的那个元素，不受事件冒泡影响。

示例说明

假设 HTML 结构如下：

<div id="outer" style="padding: 50px; background: pink;">
  外层元素
  <div id="inner" style="padding: 30px; background: lightblue;">
    内层元素
  </div>
</div>

JS 代码：

const outer = document.getElementById('outer');
outer.addEventListener('click', function(e) {
  console.log('e.target:', e.target.id);      // 实际点击的元素
  console.log('e.currentTarget:', e.currentTarget.id);  // 绑定事件的元素（outer）
  console.log('this:', this.id);              // 与 currentTarget 相同（outer）
});

• 点击内层元素（inner） ：

  • e.target → inner（实际触发事件的元素）
  • e.currentTarget → outer（绑定事件的元素）
  • this → outer

• 点击外层元素（outer，非 inner 区域） ：

  • e.target → outer
  • e.currentTarget → outer
  • this → outer

总结

• e.target：谁触发了事件，就指向谁（事件源头）。

• e.currentTarget：谁绑定了事件，就指向谁（事件处理器所在的元素）。

在事件委托（利用冒泡机制）时，这两个属性的区别尤为重要。例如，通过外层元素代理内层元素的事件时，e.target 可获取具体操作的内层元素，而 e.currentTarget 始终是外层代理元素。