PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

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

DOM и браузер

`event.target` — это элемент, на котором событие изначально возникло, а `event.currentTarget` — элемент, на котором висит текущий обработчик. Они различаются при всплытии.

Различие

  • target — где событие произошло (например, кнопка, по которой кликнули).
  • currentTarget — где сейчас выполняется обработчик (например, родитель, поймавший всплывшее событие).
list.addEventListener('click', (e) => {
  console.log(e.currentTarget); // всегда list (где обработчик)
  console.log(e.target);        // конкретный элемент, по которому кликнули
});

Наглядно при делегировании

При клике по <li> внутри <ul> с обработчиком на <ul>:

  • target = <li> (источник),
  • currentTarget = <ul> (обработчик).

Это основа делегирования событий: один обработчик на родителе, а конкретный элемент определяют через target.

Нюанс

currentTarget доступен только во время обработки события; после (например, в асинхронном коллбэке) он станет null. target остаётся.

Коротко для собеседования

target — элемент-источник события, currentTarget — элемент с текущим обработчиком. При всплытии они разные: клик по <li> в <ul> даёт target = li, currentTarget = ul. currentTarget валиден только во время обработки.

Другие вопросы раздела