使用 eventListener 时为什么使用 event.target 而不是仅仅引用元素

Question

如果我有一堆 HTML 按钮并运行：

const buttons = document.querySelectorAll('button');

buttons.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    console.log(btn.textContent);
    console.log(e.target.textContent);
  });
});

btn 和 e.target 有什么区别？我知道我可以使用事件委托来使其更清晰，但是我想知道它们是否完全相同并且可以互换使用。

Answer 1

它们可能有所不同。

event.target

是对事件被分派到的对象的引用。这可能与侦听器附加到的元素不是同一对象。

event.target

可以是一个子元素，它将事件冒泡到附加了侦听器的 DOM 元素。

另一方面，

event.currentTarget

是对附加了侦听器的对象的引用，可以互换使用。

https://developer.mozilla.org/en-US/docs/Web/API/Event/target https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget