当我只能使用元素本身时，为什么还要使用 event.currentTarget？

Question

假设我想在单击图像时将rounded-circle class 添加到图像中：

const img = document.getElementById('my-image');
img.addEventListener('click', () => {
  event.currentTarget.classList.add('rounded-circle');
});

我被教导使用event.currentTarget以便在回调中 select 该图像。 但是，由于该图像已经在变量img中声明，我也可以这样做：

const img = document.getElementById('my-image');
img.addEventListener('click', () => {
  img.classList.add('rounded-circle');
});

那么为什么要使用event.currentTaget而不是img呢？ 有没有首选的方法，为什么？

Answer 1

currentTarget 返回其事件侦听器触发事件的元素。 与返回元素触发事件的目标相反。 获取事件 lsitener 触发的元素的另一种方法是通过事件侦听器中的this关键字：

document.getElementById('my-image').addEventListener('click', function () => {
  this.classList.add('rounded-circle');
});