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

谁能告诉我Javascript事件中的currentTarget和target属性之间的确切区别，并带有示例以及在哪种情况下使用哪个属性？

它的重要意义在于，某些浏览器使用不同的方法，例如，如果您侦听div复制事件，则在FF中您将获得textNode而不是元素，但是侦听器将位于div级别。

#1 楼

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

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

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

target =触发事件的元素； currentTarget =侦听事件的元素。

– markmarijnissen
2014年8月14日17:27

@markmarijnissen您绝对应该把您的评论作为答案，因为它比上面的答案更有用，而且投票也更多！

– Andrea
2015年12月9日17:11

您能否根据此评论更新您的答案

–拉希尔·瓦齐尔（Rahil Wazir）
15年12月24日在12:28

认为currentTarget为“ specifiedTarget”

– Craigmichaelmartin
16年7月13日在15:54

@ markmarijnissen，Elements触发了一个事件，他们不收听它。当发生时，我们只是分配处理程序来执行它。 currentTarget是附加了事件处理程序的对象。

– Samyak Jain
19年5月15日在1:16

#2 楼

target =触发事件的元素。

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

元素触发事件，但不监听。当发生时，我们只是分配处理程序来执行它。 currentTarget是附加了事件处理程序的对象。

– Samyak Jain
19年5月15日在1:16

@SamyakJain那么，如果函数不监听事件，为什么会调用.addEventListener（）呢？

– Samathingamajig
20年12月1日在2:44

@Samathingamajig因为您将事件侦听器添加到HTML元素。侦听的不是元素，而是浏览器提供的Web-Api中的侦听器。

– m4110c
20年12月1日，14：40

#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

在Chromium 71上进行了测试。

#4 楼

如果这还不能解决，请尝试以下操作：currentTarget中的当前是指当前。这是捕获其他地方冒起的事件的最新目标。

从冒泡阶段的角度来看这很有用。我最初的猜测是currentTarget是指触发事件的元素，因为current表示可变性，并且触发对象可以在事件之间改变。

–最大
20/12/23在10:25

#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和form标记中删除了onclick，现在当我们在P标记上单击时，我们只收到一个警报： object HTMLDivElement]

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

event.target是事件发生的节点，
和
event.currentTarget相反，是指附加了当前事件侦听器的节点。 br />

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

我认为这是一个很好的例子。它清除了我的头

–德林伊
20 Dec 14'17:43

#6 楼

event.target是事件起源的节点，即无论您将事件侦听器放置在何处（在段落或跨度上），event.target都是指节点（用户单击了该位置）。听众已连接。就是如果我们将事件侦听器附加在段落节点上，则event.currentTarget指代段落，而event.target仍指跨度。 event.currentTarget指向主体（即，每次事件冒泡一个节点时，作为输入提供给事件侦听器的事件都会更新）。

对于任何访问此页面的人，此答案不正确！检查接受的答案！这件事应该被淘汰掉。 RepresentativeTarget是引用事件所在位置的节点。

– LittleTreeX
20年6月18日在20:49

@LittleTreeX是的，它是Google的索引答案

–詹姆斯·奥克佩·乔治（James Okpe George）
20年7月19日在7:06

#7 楼

对于气泡为true的事件，它们会冒泡。
大多数事件都会冒泡，除了几个事件，即焦点，模糊，mouseenter，mouseleave，...
如果事件evt出现气泡，则evt.currentTarget会更改为当前目标处于冒泡路径中，而evt.target保持与触发该事件的原始目标相同的值。处理程序使用currentTarget。 currentTarget应该在本地缓存，因为事件对象已在冒泡链（codepen）中重新使用。

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

如果使用v17中的React，则react将丢弃事件池。因此，事件对象将在处理程序中刷新，并且可以安全地用于异步调用（codepen）中。
从react docs

注意： persist（）不会做任何事情，因为SyntheticEvent
不再被合并。在这里发布。

编程黑洞网