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

Что проверяют

Понимаете ли вы всплытие событий и делегирование. Вопрос короткий, но именно на нём ломается делегирование в списках.

Как отвечать

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

Разница видна ровно тогда, когда событие всплывает: клик по иконке внутри кнопки даст target равным иконке, а currentTarget равным кнопке.

list.addEventListener("click", (e) => {
  // e.currentTarget === list всегда
  const row = e.target.closest("[data-id]");   // ищем нужного предка от места клика
  if (row) open(row.dataset.id);
});

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

Что ещё стоит назвать:

• currentTarget доступен только пока обработчик выполняется. В асинхронном коде после await он уже null, поэтому нужное значение сохраняют в переменную сразу;
• в обычной функции-обработчике this совпадает с currentTarget, в стрелочной нет;
• у focus, blur и некоторых других событий всплытия нет, для делегирования берут focusin и focusout;
• relatedTarget пригодится в событиях мыши и фокуса, чтобы понять, откуда или куда ушёл указатель.

Где спотыкаются

Пишут e.target.dataset.id в делегированном обработчике и получают undefined, потому что кликнули по вложенному элементу. Лечится через closest.

Обращаются к e.currentTarget после await и получают null.

Останавливают всплытие через stopPropagation ради локальной проблемы и ломают делегирование выше по дереву.