javascript中currentTarget属性和target属性之间的确切区别是什么？

Question

谁能告诉我确切的区别currentTarget以及target财产的JavaScript事件与例子,哪个属性在场景中使用？

Answer 1

基本上,事件默认为泡沫,因此两者之间的差异是:

• target 是触发事件的元素(例如,用户点击)
• currentTarget 是事件侦听器附加到的元素.

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

Answer 2

target =触发事件的元素.

currentTarget =侦听事件的元素.

Answer 3

最小的可运行示例

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上测试.

Answer 4

如果这不坚持,试试这个:

current in currentTarget指的是现在.这是最近发现从其他地方冒出来的事件的目标.

Answer 5

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

如果点击上面代码中的 P 标签，你会得到三个警告，如果你点击 div 标签，你会得到两个警告和一个点击表单标签的警告。现在看下面的代码，

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>
<script>
function fun(event){
  alert(event.target+" "+event.currentTarget);
}

</script>

<form>FORM
  <div onclick="fun(event)">DIV
    <p>P</p>
  </div>
</form>

我们刚刚从 P 和表单标签中删除了 onclick，现在当我们点击 P 标签时，我们只会收到一个警报：

[对象 HTMLParagraphElement] [对象 HTMLDivElement]

这里 event.target 是 [object HTMLParagraphElement]，而 event.curentTarget 是 [object HTMLDivElement]： 所以

event.target 是发起事件的节点，而 event.currentTarget 则相反，指的是当前事件监听器所在的节点。要了解更多信息，请参阅冒泡

在这里，我们点击了 P 标签，但我们在 P 上没有监听器，而是在它的父元素 div 上。

Answer 6

对于那些事件的气泡是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在事件处理程序完成之后。总之，如果您打算在同步调用后使用它们，请始终在本地缓存事件的属性。

来自反应文档

笔记：

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

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

Answer 7

Event.currentTarget是已附加事件处理程序的元素，而不是Event.target，它标识发生事件的元素并且可能是其后代元素。

来源：MDN

target始终引用前面的元素addEventListener- 它是事件起源的元素。 currentTarget告诉您 - 如果这是一个正在冒泡的事件 - 当前附加了事件侦听器的元素（如果事件发生，它将触发事件处理程序）。

请参阅此 CodePen的示例。如果您打开开发人员工具并单击正方形，您将看到首先 div 是目标和 currentTarget，但事件冒泡到主元素 - 然后主元素成为 currentTarget，而 div 仍然是目标。请注意，事件侦听器需要附加到两个元素才能发生冒泡。

Answer 8

event.target是事件起源的节点，即。无论您将事件侦听器放置在何处（在段落或跨度上）， event.target 都是指节点（用户单击的位置）。

event.currentTarget则相反，指的是当前事件侦听器所在的节点。IE。如果我们在段落节点上附加我们的事件侦听器，那么 event.currentTarget 指的是段落，而 event.target 仍然指的是跨度。注意：如果我们在 body 上也有一个事件监听器，那么对于这个事件监听器， event.currentTarget 指的是 body（即，作为输入提供给事件监听器的事件在每次事件冒泡一个节点时更新）。