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

288

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

javascript

— 瓦利69
source

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

— Nikos

400

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

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

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

— 格里芬
source

111

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

— markmarijnissen 2014年

2

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

— 安德里亚（Andrea）2015年

您能否根据此评论

— Rahil Wazir 2015年

认为currentTarget为“ specifiedTarget”

— craigmichaelmartin 16/07/13

它并不总是一个元素。例如XMLHttpRequest

— 克伦民族联盟

77

target =触发事件的元素。

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

— 马克马里尼森
source

3

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

— Samyak Jain

23

最小的可运行示例

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

— Ciro Santilli郝海东冠状病六四事件法轮功
source

18

如果这种方法不起作用，请尝试以下操作：

电流在currentTarget指本。这是捕获其他地方冒起的事件的最新目标。

— 用户名
source

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标签，则将在单击form标签时获得两个警报和一个警报。现在看下面的代码，

<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标记上单击时，我们仅收到一个警报：

[对象HTMLParagraphElement] [对象HTMLDivElement]

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

event.target是事件起源的节点，而event.currentTarget相反，是指附加了当前事件侦听器的节点。有关更多信息，请参阅冒泡

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

— Somesh Sharma
source

3

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

相反，event.currentTarget指的是附加了当前事件侦听器的节点。就是如果将事件侦听器附加在段落节点上，则event.currentTarget引用段落，而event.target仍然引用span。注意：如果我们在主体上也有一个事件侦听器，那么对于此事件侦听器，event.currentTarget是指主体（即，每次事件冒泡一个节点时，作为输入提供给事件侦听器的事件都会更新）。

— YogeshBagdawat
source