使用event.target与选择元素的区别

Question

通过event.target操作元素的属性和直接操作有什么区别吗？

我不明白它们之间是否有任何区别。

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

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

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

在做这件事情时，有更好的实践方法吗？

- Felipe Rueda

---

并不是，你可以随意使用它们。 - Konrud

仅当<button>元素没有子元素时才选择@Konrud。 - Pointy

Answer 1

是的，这里有一个重要的区别。 event.target 属性告诉你与事件创建相关的元素。对于“click”事件，它是在“click”发生时在光标下方的元素。

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

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

按钮内容 的点击将触发来自 <span> 或 <img> 中的事件，其中之一将成为目标。

还有另一个事件属性 event.currentTarget，它始终是对事件处理程序所附加的元素的引用。这可能是您想要的。或者，如果使用.addEventListener()绑定处理程序，则当调用处理程序时this的值将是对与currentTarget相同的东西的引用。

- Pointy

---

是的，好评论，不过this可能更好，因为（挑剔一下），currentTarget并不总是引用事件处理程序所附加的元素，它是事件发生的当前阶段的元素，例如如果你这样做elem.onclick = e => { setTimeout(()=>console.log(e.currentTarget)); }，你会得到null。 - Kaiido

@Kaiido 嗯，是的，那样会失败，但这没有任何意义，因为超时处理程序不是DOM事件处理程序，也没有涉及到任何事件对象。 - Pointy

不好意思，你没有理解我的意思。我之前的评论表述有点含糊。实际上我是想说：elem.onclick = e => { setTimeout(()=>console.log(e.currentTarget)); } - Kaiido

@Kaiido 说得对，使用 this 也可以。 - Pointy

啊，我了解你的意思。是的，那显然不能正常工作。 - Pointy

Answer 2

在您的情况下，您是通过ID选择元素。您的引用与target相同，因此没有区别。我们经常使用委托，因此您可能无法引用已单击的元素。因此，我们使用来自event对象的target。

值得注意的是检查target与currentTarget的区别。

- Ahmad Alfy