javascript - 使用 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() 绑定(bind)处理程序, 那么 this 的值调用处理程序时将引用与 currentTarget 相同的内容.