target и currentTarget: куда нажали и где работает обработчик

Назначение

У события есть источник взаимодействия и объект, на котором выполняется текущий обработчик. Различие target и currentTarget помогает объяснить поведение кнопок с вложенными иконками и делегирование событий.

Как это работает

В собственном файле создайте button id save, внутри которого есть span с текстом. Подключите код после кнопки. Щелчок по вложенному span может дать его в target, а currentTarget в этом обработчике будет кнопкой.

Пример

const button = document.querySelector("#save");
button.addEventListener("click", event => {
  console.log("Источник:", event.target.tagName);
  console.log("Обработчик:", event.currentTarget.id);
  const owner = event.currentTarget;
  queueMicrotask(() => console.log("Сохранённая ссылка:", owner.id));
});

Что должно получиться

Для разных точек нажатия источник может отличаться, но владелец обработчика остаётся save. Ссылка owner сохраняется явно, если она понадобится после завершения обработки события.

Граница применения и частая ошибка

CurrentTarget вне выполнения обработчика становится null. Не обращайтесь к нему позднее через сохранённый event в расчёте на прежнее значение. В Shadow DOM действует переназначение цели, поэтому простой пример не описывает все границы компонентов.

Самостоятельная проверка

Нажмите на текст и на свободную область кнопки. Затем активируйте её клавиатурой и сравните сообщения. Перенесите обработчик на родителя и сформулируйте, какое поле теперь указывает на родителя.

Связанные материалы

• Ошибки формы
• События
• Постепенное улучшение