通过event.target
操作元素的属性和直接操作有什么区别吗?
我不明白它们之间是否有任何区别。
const btn = document.querySelector('#btn');
btn.addEventListener('click', function(e) {
console.log(e.target.value);
//vs
console.log(btn.value);
}
在做这件事情时,有更好的实践方法吗?
通过event.target
操作元素的属性和直接操作有什么区别吗?
我不明白它们之间是否有任何区别。
const btn = document.querySelector('#btn');
btn.addEventListener('click', function(e) {
console.log(e.target.value);
//vs
console.log(btn.value);
}
在做这件事情时,有更好的实践方法吗?
是的,这里有一个重要的区别。 event.target
属性告诉你与事件创建相关的元素。对于“click”事件,它是在“click”发生时在光标下方的元素。
因此,如果你的HTML看起来像:
<button><span>Text</span><img src="something.jpg"></button>
的点击将触发来自 <span>
或 <img>
中的事件,其中之一将成为目标。event.currentTarget
,它始终是对事件处理程序所附加的元素的引用。这可能是您想要的。或者,如果使用.addEventListener()
绑定处理程序,则当调用处理程序时this
的值将是对与currentTarget
相同的东西的引用。this
可能更好,因为(挑剔一下),currentTarget
并不总是引用事件处理程序所附加的元素,它是事件发生的当前阶段的元素,例如如果你这样做elem.onclick = e => { setTimeout(()=>console.log(e.currentTarget)); }
,你会得到null
。 - Kaiidoelem.onclick = e => { setTimeout(()=>console.log(e.currentTarget)); }
- Kaiidothis
也可以。 - Pointytarget
相同,因此没有区别。我们经常使用委托,因此您可能无法引用已单击的元素。因此,我们使用来自event
对象的target
。target
与currentTarget
的区别。
<button>
元素没有子元素时才选择@Konrud
。 - Pointy