Если событие повешено на кнопку, какой элемент будет CurrentTarget

CurrentTarget в Event Handling

currentTarget - это свойство объекта события, которое возвращает элемент, на котором обработчик события был зарегистрирован. В отличие от target, который указывает на элемент, который инициировал событие, currentTarget всегда указывает на элемент, к которому привязан слушатель события.

Ключевое отличие: target vs currentTarget

Важно понимать разницу между этими двумя свойствами:

• target - элемент, на котором событие произошло (исходный источник события)
• currentTarget - элемент, на котором выполняется текущий обработчик события

Это особенно важно при всплытии событий (event bubbling).

Пример с кнопкой

const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  console.log(event.target);        // Элемент, на котором произошёл клик
  console.log(event.currentTarget);  // Кнопка, к которой привязан слушатель
  
  console.log(event.target === event.currentTarget); // true в этом случае
});

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

Сценарий с делегированием событий

Разница становится явной при делегировании событий (event delegation):

// HTML:
// <ul id="list">
//   <li><button>Кнопка 1</button></li>
//   <li><button>Кнопка 2</button></li>
// </ul>

const list = document.querySelector("#list");

list.addEventListener("click", (event) => {
  console.log(event.target);        // <button>Кнопка 1</button> (или 2)
  console.log(event.currentTarget);  // <ul id="list"> (элемент слушателя)
});

Здесь:

• event.target будет кнопка, на которую пользователь кликнул
• event.currentTarget будет <ul>, к которому привязан слушатель

Практическое применение

Это различие используется при обработке событий на контейнерах:

const container = document.querySelector(".container");

container.addEventListener("click", (event) => {
  // Проверяем, что клик был именно на кнопке
  if (event.target.classList.contains("btn")) {
    // Обрабатываем клик на кнопке
    console.log("Кнопка нажата:", event.target.textContent);
  }
  
  // currentTarget всегда указывает на контейнер
  console.log("Обработчик на элементе:", event.currentTarget.className);
});

Важные замечания

1. currentTarget доступен только во время обработки события - после обработчика закончится, event.currentTarget вернёт null

button.addEventListener("click", (event) => {
  console.log(event.currentTarget); // <button>
});

const savedEvent = event; // НЕ сохраняй событие!
// позже...
console.log(savedEvent.currentTarget); // null

1. В React используй event.currentTarget вместо event.target для получения элемента слушателя, так как React работает с синтетическими событиями

2. Нет currentTarget при всплытии вверх по DOM - это свойство относится только к элементу, на котором привязан текущий обработчик

Резюме

Если событие повешено на кнопку, event.currentTarget будет указывать именно на эту кнопку. Это простой и предсказуемый случай. Сложность возникает при делегировании, когда слушатель находится на контейнере, а target указывает на вложенный элемент.