谁能告诉我在JavaScript事件中的currentTarget和target属性的确切区别,以及哪个属性在哪个场景中使用?
当前回答
如果这还不行,试试这个:
currentTarget中的current指的是当前。这是最新的目标,捕捉到从其他地方冒出来的事件。
其他回答
<时尚> 正文* { 保证金:10 px; 边框:1px纯蓝色; } > < /风格 <形式onclick = "警报(形式)“>形式 < div onclick = "警报(div)“> DIV < p onclick = "警报(“p”)“P > < / P > < / div > > < /形式
如果点击上面代码中的P标签,那么你会得到三个警报,如果你点击div标签,你会得到两个警报和一个警报,点击表单标签。 现在看下面的代码,
<时尚> 正文* { 保证金:10 px; 边框:1px纯蓝色; } > < /风格 < >脚本 函数有趣(事件){ 警报(事件。目标+ " " + event.currentTarget); } > < /脚本 < >形式 < div onclick = "乐趣(事件)“> DIV < p > p > < / p < / div > > < /形式 我们刚刚从P和form标签中删除了onclick,现在当我们点击P标签时,我们只得到一个警告:
[htmlparagraph片段][htmlvevement对象]
这里的事件。目标是[object html分段ement],而事件。curentTarget是[object HTMLDivElement]: 所以
事件。目标是事件产生的节点, 而且 事件。相反,currentarget指向附加了当前事件监听器的节点。知多见冒泡
这里我们点击了P标签,但是我们没有监听器在P上,而是在它的父元素div上。
最小可运行示例
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测试。
对于泡沫属性为真的事件,它们会冒泡。
大多数事件都冒泡,除了几个,即焦点,模糊,鼠标进入,鼠标离开,…
如果事件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 不再被池化。
还有很多其他的东西太长了,不能贴在答案里,所以我总结了一下,在这里写了一篇博客。
事件。currentTarget是事件处理程序已经归属的元素 附加的,而不是事件。目标,它标识上的元素 哪个事件发生了,哪个可能是它的后代。
来源:中数
target总是引用addEventListener前面的元素——它是事件产生的元素。 currentTarget告诉你——如果这是一个冒泡的事件——当前附加了事件监听器的元素(如果事件发生,它将触发事件处理程序)。
有关示例,请参阅这个CodePen。如果你打开开发工具并单击方块,你会看到首先div是目标和currentTarget,但是事件气泡上升到主元素-然后主元素变成了currentTarget,而div仍然是目标。注意,要发生冒泡,需要将事件侦听器附加到这两个元素。
如果这还不行,试试这个:
currentTarget中的current指的是当前。这是最新的目标,捕捉到从其他地方冒出来的事件。