Javascript 使用event.target与选择元素

通过

event.target

处理元素的属性与直接处理它有什么区别吗

我不明白是否有什么不同

const btn = document.querySelector('#btn');

btn.addEventListener('click', function(e) {

  console.log(e.target.value);
  //vs
  console.log(btn.value);
}

---

这样做有更好的做法吗？

在您的情况下，您是按ID选择元素。您的引用与

目标相同，因此没有区别。我们使用了很多时间，因此您可能没有对单击的元素的引用。因此，我们使用
事件
对象中的
目标

同样值得检查目标与否是的，有一个重要的区别。
event.target
属性告诉您创建事件涉及的元素。对于“单击”，它是发生“单击”时光标下的元素

因此，如果您的HTML看起来像：

<button><span>Text</span><img src="something.jpg"></button>

文本

单击按钮内容将从
或
触发事件，其中一个元素将成为目标

还有另一个事件属性，
event.currentTarget
，它始终是对事件处理程序附加到的元素的引用。那可能是你想要的。或者，如果使用
.addEventListener（）
绑定处理程序，则调用处理程序时，
this
的值将引用与
currentTarget
相同的内容。实际上，您可以互换使用它们。@Konrud只有在
没有元素子级的情况下才可以使用。好的评论，虽然
这个
可能更好，因为（挑剔），
currentTarget
并不总是引用事件处理程序所附加到的元素，它是事件发生的当前阶段所在的元素，如果您执行
elem.onclick=e=>{setTimeout（（）=>console.log（e.currentTarget））；}
，您将得到
null
@kaido是的，这将失败，但这没有任何意义，因为超时处理程序不是DOM事件处理程序，并且没有涉及任何事件对象。不，您不明白我的意思，对不起，我在前面的评论中提到了太多，我的意思是
elem.onclick=e=>{setTimeout（（）=>console.log（e.currentTarget））；}
@kaido说的没错，
这个
也会起作用。啊，我明白你的意思了。是的，这显然不能正常工作。