> В чем разница между target и currentTarget в событиях JavaScript? (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Kodix, Домклик

Стек: JavaScript

> Пример ответа

В JavaScript при обработке событий event.target указывает на элемент, который инициировал событие (например, на который пользователь кликнул), а event.currentTarget - на элемент, к которому привязан обработчик события. Разница становится очевидной при всплытии (bubbling): если кликнуть на дочерний элемент внутри родительского, target будет дочерним элементом, а currentTarget - родительским (тем, на котором висит слушатель). Например:

JAVASCRIPT
parent.addEventListener('click', (event) => {
  console.log(event.target);        // <span> (если кликнули на span)
  console.log(event.currentTarget); // <div> (родительский элемент)
});

currentTarget всегда равен this внутри обработчика (если не используется стрелочная функция), а target может меняться в зависимости от того, какой элемент был фактически задействован.