Зачем использовать event.currentTarget, если я могу просто использовать сам элемент?

Question

Допустим, я хочу добавить класс rounded-circle к изображению, когда я щелкаю по нему:

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

Меня научили использовать event.currentTarget для выбора этого изображения в обратном вызове. Однако, поскольку это изображение уже объявлено в переменной 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');
});