使用 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);
}

这样做时有更好的做法吗？

Answer 1

是的，有一个重要的区别。 event.target属性告诉您事件的创建涉及哪个元素。 对于“点击”，它是“点击”发生时光标下的元素。

因此，如果您的 HTML 如下所示：

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

单击按钮内容将触发来自<span>或<img> ，这些元素之一将是目标。

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

Answer 2

在您的情况下，您正在按 ID 选择一个元素。 您的参考与target相同，因此没有区别。 很多时候我们使用委托，所以你可能没有对被点击元素的引用。 因此，我们使用target从event对象。

还值得检查目标与currentTarget目标