谁能告诉我在JavaScript事件中的currentTarget和target属性的确切区别,以及哪个属性在哪个场景中使用?
当前回答
最小可运行示例
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测试。
其他回答
最小可运行示例
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测试。
这里有一个简单的场景来解释为什么需要它。假设你用下面的格式向用户显示了一些消息,但你也想让他们自由地关闭它们(除非你有特殊的精神障碍),所以这里有一些消息窗格:
[消息将在此窗格[x]]中显示]
[消息将在此窗格[x]]中显示]
[消息将在此窗格[x]]中显示]
当用户单击每个按钮上的[x]按钮时,必须删除整个对应的窗格。
下面是窗格的HTML代码:
<div class="pane">
A message will be here
<span class="remove-button">[x]</span>
</div>
现在,您希望将单击事件侦听器添加到哪里?用户点击[x],但你想要删除窗格,所以:
如果你将click事件监听器添加到[x],那么你将不得不在DOM中找到它的父类并删除它…这是可能的,但丑陋的和“DOM依赖”。 如果你将点击事件监听器添加到窗格中,点击“窗格上的所有地方”将删除它,而不仅仅是点击它的[x]按钮。
那么我们能做什么呢?我们可以使用事件系统的“Bubbles Up”特性:
“无论是否存在任何事件处理程序,都会引发事件并在DOM树中冒泡。”
在我们的示例中,这意味着即使我们将事件处理程序添加到窗格中,我们也能够捕获由单击[x]按钮引起的事件(因为事件会冒泡)。因此,在引发事件的位置和捕获并处理事件的位置之间可能存在差异。
它被举起的地方将在事件中。目标,以及它在事件中被捕捉的位置。currentTarget(我们当前处理它的地方)。所以:
let panes = document.getElementsByClassName("pane");
for(let pane of panes){
pane.addEventListener('click', hndlr);
}
function hndlr(e){
if(e.target.classList.contains('remove-button')){
e.currentTarget.remove();
}
}
(这个例子的出处来自JavaScript.info网站)
事件。目标是事件产生的节点,即。无论您将事件侦听器放置在何处(在段落或span上),事件。目标指的是节点(用户单击的地方)。
事件。相反,currentarget指向附加了当前事件监听器的节点。Ie。如果将事件监听器附加在段落节点上,则event。currentarget指向段落while事件。目标仍然指向span。 注意:如果我们在body上也有一个事件监听器,那么对于这个事件监听器,事件。currentTarget指的是body(即。作为事件监听器的输入提供的事件在每次事件冒泡一个节点时更新)。
如果这还不行,试试这个:
currentTarget中的current指的是当前。这是最新的目标,捕捉到从其他地方冒出来的事件。
对于泡沫属性为真的事件,它们会冒泡。
大多数事件都冒泡,除了几个,即焦点,模糊,鼠标进入,鼠标离开,…
如果事件evt冒泡,则evt。currentttarget被更改为其冒泡路径中的当前目标,而evt。目标保持与触发事件的原始目标相同的值。
值得注意的是,如果您的事件处理程序(冒泡事件的)是异步的,并且处理程序使用event . currenttarget。currentTarget应该在本地缓存,因为事件对象在冒泡链中被重用(代码依赖)。
const clickHandler = evt => {
const {currentTarget} = evt // cache property locally
setTimeout(() => {
console.log('evt.currentTarget changed', evt.currentTarget !== currentTarget)
}, 3000)
}
如果你使用React,从v17开始,React会删除事件池。
因此,事件对象在处理程序中被刷新,可以安全地用于异步调用(依赖于代码)。
并不总是正确的。onClick事件的currentTarget在事件处理程序结束后未定义。总之,如果要在同步调用之后使用事件的属性,请始终在本地缓存它们。
来自react文档
注意: 从v17开始,e.persist()不做任何事情,因为SyntheticEvent 不再被池化。
还有很多其他的东西太长了,不能贴在答案里,所以我总结了一下,在这里写了一篇博客。