每日一个知识点：event.target 与 event.currentTarget 区别event.target和 e

event.target和 event.currentTarget都是 DOM 事件对象（Event 对象）的属性，它们都指向事件相关的元素，但它们的含义和用法有重要区别：

🔍 一、基本定义

1. event.target

含义：触发事件的最深层、最具体的那个元素，也就是事件实际发生的地方。
特点：它是事件起源的元素，比如你点击了一个按钮中的 <span>，那么 event.target就是这个 <span>。

2. event.currentTarget

含义：当前正在处理该事件的元素，也就是绑定事件监听器的那个元素。
特点：它始终等于你绑定事件的那个 DOM 元素，即 addEventListener被调用的那个元素。
注意：在大多数情况下，event.currentTarget === this（当使用普通函数时）。

🧩 二、通俗比喻

可以把事件传播想象成扔一块石头到水中，激起水波：

event.target 就是石头落水的那个点（最开始触发事件的地方）。
event.currentTarget 就是你站在岸边观察水波的那个位置（你绑定事件处理函数的地方）。

在事件冒泡或捕获过程中，event.currentTarget始终是你绑定监听器的那个元素，而 event.target则可能是该元素内部更具体的子元素。

🧪 三、代码示例

<div id="parent">
  父级 div
  <button id="child">点击我</button>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  parent.addEventListener('click', function(event) {
    console.log('event.target:', event.target);        // 可能是 button（如果你点的是按钮）
    console.log('event.currentTarget:', event.currentTarget); // 始终是 parent div
    console.log('this:', this);                         // 始终是 parent div（和 currentTarget 一样）
  });
</script>

情况分析：

如果你点击了 <button>（子元素）：
- event.target→ <button>（实际点击的元素）
- event.currentTarget和 this→ <div id="parent">（事件监听器绑定的元素）
如果你直接点击了 <div id="parent">（而不是子元素）：
- event.target、event.currentTarget和 this都是 <div id="parent">

🔄 四、事件流的视角（冒泡与捕获）

无论是捕获阶段还是冒泡阶段，event.currentTarget始终是你绑定监听器的那个元素，而 event.target是事件最初触发的那个元素。

✅ 总结对比表

⚠️ 注意：如果使用箭头函数作为事件处理函数，this的指向可能不是当前元素，但 event.currentTarget依然正确。

🎯 实际应用场景

1. 事件委托（Event Delegation）

利用 event.target判断用户点击的是哪个子元素，而事件监听器是绑定在父元素上的。

document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('你点击了：', event.target.textContent);
  }
});

2. 区分点击源与处理者

当你想区分用户点的是哪个具体元素（比如按钮中的图标或文字），和你绑定事件处理的是哪个父容器时，这两个属性特别有用。

🙋 常见问题

❓ 为什么有时候 event.target和 event.currentTarget不一样？

因为事件可能发生在子元素上，但事件监听器绑定在父元素上。比如点击了一个按钮中的 <span>，target是 <span>，而 currentTarget是按钮或者其父级元素。

❓ 什么时候用 target？什么时候用 currentTarget？

用 event.target→ 当你想知道用户实际点击或触发事件的元素是什么。
用 event.currentTarget→ 当你想操作绑定事件的那个元素本身。

✅ 总结一句话

event.target是事件起源的元素，event.currentTarget是当前处理事件的元素（即绑定监听器的元素）。

如果你在写事件委托、处理复杂嵌套的 UI 交互，理解它们的区别非常重要！

每日一个知识点：event.target 与 event.currentTarget 区别