В чём разница между event.target и event.currentTarget?

Пример HTML:

<div id="parent">
  <button id="child">Кликни меня</button>
</div>

JavaScript:

document.getElementById("parent").addEventListener("click", function(event) {
  console.log("target:", event.target.id);      // "child" (источник события)
  console.log("currentTarget:", event.currentTarget.id); // "parent" (обработчик)
});

Разница:

• Если кликнуть по кнопке:

  • event.target — button#child (куда попал клик).

  • event.currentTarget — div#parent (где висит обработчик).

Когда использовать:

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

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