Отличие event.target и event.currentTarget в JavaScript

В JavaScript при работе с событиями часто используются свойства event.target и event.currentTarget. Несмотря на схожесть, они имеют разные назначения и могут возвращать разные элементы.

Определения

• event.target — элемент, на котором фактически произошло событие. Это может быть вложенный элемент.
• event.currentTarget — элемент, на котором висит обработчик события (тот, к которому вы привязали addEventListener).

Пример

<div id="parent">
  <button id="child">Click me</button>
</div>

const parent = document.getElementById("parent");

parent.addEventListener("click", function (event) {
  console.log("target:", event.target);
  console.log("currentTarget:", event.currentTarget);
});

Если вы кликните по кнопке #child, то:

• event.target будет <button id="child">
• event.currentTarget будет <div id="parent">

Потому что событие произошло на кнопке, но обработчик навешан на родителя (parent).

Когда используется?

• event.target — полезно, если вы делаете делегирование событий и хотите определить, на каком элементе случилось событие.
• event.currentTarget — удобно использовать, если вы хотите получить тот элемент, на котором висит обработчик, особенно внутри универсального обработчика.

Полезный пример делегирования

document.querySelector("#list").addEventListener("click", function (e) {
  if (e.target.tagName === "LI") {
    console.log("Clicked item:", e.target.textContent);
  }
});

Здесь event.target — это конкретный <li>, на который кликнули. Это позволяет отслеживать клики на элементах, созданных динамически.

Итог