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

2020/10/04 03:01 · javascript ·  · 0评论

谁能告诉我Javascript事件中currentTargetandtarget属性与示例之间的确切区别,以及在哪种情况下使用哪个属性?

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

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

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

target = element that triggered event.

currentTarget = element that has the event listener.

最小的可运行示例

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

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

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

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

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

<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上有侦听器。

本文地址:http://javascript.askforanswer.com/javascriptzhongcurrenttargetshuxinghetargetshuxingzhijiandequeqiequbieshishenme.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!