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

Короткий ответ

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

Подробное объяснение

В модели событий DOM существует фаза всплытия (bubbling), когда событие после срабатывания на целевом элементе поднимается вверх по дереву. Свойство target (или srcElement в старых IE) всегда ссылается на элемент, который инициировал событие - тот, на котором произошло фактическое действие (клик, наведение и т.д.). Оно не меняется на протяжении всего жизненного цикла события.

currentTarget - это элемент, к которому привязан текущий обработчик события. Его значение меняется по мере всплытия: на каждом уровне обработчик видит в currentTarget свой собственный элемент. Если обработчик не привязан к элементу, currentTarget будет null.

Ключевое отличие: target статичен, currentTarget динамичен и зависит от того, какой обработчик сейчас выполняется. Это позволяет различать, где произошло событие и где его обрабатывают.

На практике

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

В обработчиках, привязанных непосредственно к элементу, оба свойства обычно совпадают (если событие не всплыло от вложенного элемента). Разница становится критичной при работе с вложенными структурами: модальными окнами, дропдаунами, списками.

Пример кода

JAVASCRIPT
document.querySelector('.parent').addEventListener('click', (event) => {
  console.log('target:', event.target.tagName);      // SPAN или DIV
  console.log('currentTarget:', event.currentTarget.className); // parent
});

// HTML: <div class="parent"><span>Кликни</span></div>

Как отвечать на собеседовании

Начни с чёткого определения обоих свойств. Приведи пример с делегированием, где разница очевидна. Упомяни, что currentTarget может быть null вне обработчика (например, после вызова removeEventListener). Покажи понимание фаз события: capture, target, bubble. Если спросят про event.target.closest() - объясни, как это связано.

Что проверяет интервьюер

Понимание event propagation (всплытие и перехват). Умение применять делегирование событий. Знание тонкостей: currentTarget в обработчиках на capture-фазе, поведение при stopPropagation. Способность объяснить разницу на практическом примере, а не просто заученное определение.

Типичные ошибки

Путать target и currentTarget, особенно когда обработчик висит на том же элементе, что и инициатор. Думать, что currentTarget всегда равен элементу, на котором вызван addEventListener - это верно только в момент выполнения обработчика. Использовать target для проверки, на каком элементе висит обработчик - это некорректно при всплытии.