js事件中currentTarget和target的区别是什么？

在JavaScript事件处理中，currentTarget 和 target 属性都与事件触发的位置有关，但它们代表不同的元素：

• target: target 属性指向事件最初发生的元素。它是事件的起源地，也就是直接触发事件的DOM元素。 即使事件冒泡到父元素，target 属性仍然保持不变，始终指向最初触发事件的元素。

• currentTarget: currentTarget 属性指向当前正在处理事件的元素。在事件冒泡过程中，事件会沿着DOM树向上层级传播，依次触发每个祖先元素的事件监听器。在每个祖先元素的事件处理函数中，currentTarget 指向当前正在执行事件处理函数的元素。

举例说明：

假设你有一个嵌套的HTML结构：

<div id="outer">
  <button id="inner">Click Me</button>
</div>

然后你为 outer 和 inner 元素都添加了点击事件监听器：

document.getElementById('outer').addEventListener('click', function(event) {
  console.log("Outer Target: ", event.target.id);
  console.log("Outer Current Target: ", event.currentTarget.id);
});

document.getElementById('inner').addEventListener('click', function(event) {
  console.log("Inner Target: ", event.target.id);
  console.log("Inner Current Target: ", event.currentTarget.id);
});

当你点击 button 时，会发生以下情况：

1. inner 元素的点击事件触发:

   • event.target.id 为 "inner"
   • event.currentTarget.id 为 "inner"

2. 事件冒泡到 outer 元素:

   • event.target.id 仍然是 "inner" (目标元素不变)
   • event.currentTarget.id 变为 "outer" (当前处理事件的元素变成了outer)

总结：

target 属性始终指向事件起源的元素，而 currentTarget 会随着事件冒泡而改变，指向当前正在处理事件的元素。 理解这两个属性的区别对于编写高效的事件处理代码至关重要，尤其是在处理事件委托（Event Delegation）时，你需要使用 event.target 来确定具体哪个子元素触发了事件。