基本上，默认情况下事件会冒泡，因此两者之间的区别是：

• target 是触发事件的元素（例如，用户点击）
• currentTarget 是事件侦听器附加到的元素。

请参阅此博客文章中的简单说明。

target = 触发事件的元素。

currentTarget = 具有事件侦听器的元素。

最小的可运行示例

window.onload = function() {
  var resultElem = document.getElementById('result')
  document.getElementById('1').addEventListener(
    'click',
    function(event) {
      resultElem.innerHTML += ('<div>target: ' + event.target.id + '</div>')
      resultElem.innerHTML += ('<div>currentTarget: ' + event.currentTarget.id + '</div>')
    },
    false
  )
  document.getElementById('2').dispatchEvent(
          new Event('click', { bubbles:true }))
}

<div id="1">1 click me
  <div id="2">2 click me as well</div>
</div>
<div id="result">
  <div>result:</div>
</div>

如果您点击：

2 click me as well

然后1听它，并附加到结果：

target: 2
currentTarget: 1

因为在那种情况下：

• 2 是引发事件的元素
• 1 是监听事件的元素

如果您点击：

1 click me

相反，结果是：

target: 1
currentTarget: 1

在铬 71 上测试。

如果这不坚持，请尝试以下操作：

current incurrentTarget是指现在。这是捕获从其他地方冒出来的事件的最新目标。

对于那些事件的气泡是true，他们的泡沫。

大多数事件都会冒泡，除了几个，即focus , blur , mouseenter , mouseleave , ...

如果事件evt冒泡，则将evt.currentTarget更改为其冒泡路径中的当前目标，而evt.target保持与触发事件的原始目标相同的值。

值得注意的是，如果您的事件处理程序（冒泡事件的）是异步的并且处理程序使用evt.currentTarget. currentTarget应该在本地缓存，因为事件对象在冒泡链 ( codepen ) 中被重用。

const clickHandler = evt => {
  const {currentTarget} = evt // cache property locally
  setTimeout(() => {
    console.log('evt.currentTarget changed', evt.currentTarget !== currentTarget)
  }, 3000)
}

如果您使用 React，从 v17 开始，react 会删除Event Pooling。

因此，事件对象在处理程序中刷新并且可以安全地用于异步调用 ( codepen )。

↑ 并不总是正确的。onClick事件currentTarget是undefined在事件处理程序完成之后。总之，如果您打算在同步调用后使用它们，请始终在本地缓存事件的属性。

来自react文档

笔记：

从 v17 开始， e.persist() 不会做任何事情，因为 SyntheticEvent 不再被合并。

以及其他很多太长的东西无法粘贴在一个答案中，所以我在这里总结并发了一篇博文。