在javascript中的currentTarget属性和目标属性之间的确切区别是什么?
任何人都可以告诉我在JavaScript事件中的currentTarget
和target
属性之间的确切区别与示例和哪个属性在哪种情况下使用?
基本上, 事件泡沫默认情况下,所以两者的区别是:
-
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 <div id="2">2 </div> </div> <div id="result"> <div>result:</div> </div>
如果这不是坚持,试试这个:
currentTarget
current表示当前。 这是最近的目标,从其他地方冒出来的事件。
event.target是事件发生的节点,即。 无论您放置事件侦听器(段落或跨度),event.target都指节点(用户单击的地方)。
event.currentTarget ,相反,是指当前事件侦听器附加的节点。 IE浏览器。 如果我们在段落节点上附加了我们的事件监听器,那么event.currentTarget引用了段落,而event.target仍然引用了span。 注意:如果我们在body上也有一个事件监听器,那么对于这个事件监听器,event.currentTarget引用body(即,事件提供者作为input提供的事件每次事件冒泡一个节点时被更新)。