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

Question

Say I want to add rounded-circle class to an image when I click on it:

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

I've been taught to use event.currentTarget in order to select that image within the callback. However, since this image is already declared in the variable img , I can also do:

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

So why use event.currentTaget instead of img ? Is there a preferred way, and why?

Answer 1

The currentTarget returns the element whose event listener triggered the event. in contrast to target which returns the element triggered the event. Another way to get the element whose event lsitener triggered, is through this keyword in event listener:

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