e.target 和 e.currentTarget 的区别

1一、核心区别

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

1. e.target

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

2. e.currentTarget

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

2二、示例说明

假设 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）：

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

3三、总结