Властивість event.target

JavaScriptJunior~2 хв читання

event.target показує той елемент, на якому подія сталася фактично, тобто джерело події. Це одна з найкорисніших властивостей об'єкта події: вона дає точно знати, куди саме користувач клікнув, що ввів або яку дію викликав.

Теорія

TL;DR

event.target це елемент DOM, на якому подія виникла вперше.
Він не обов'язково збігається з елементом, на якому висить обробник.
Елемент з обробником доступний як event.currentTarget.
Тип даних у обох випадках це DOM-елемент (HTMLElement).
Головне застосування це делегування подій: один слухач замість сотень.
У формах event.target.name і event.target.value дають змінене поле й нове значення.

Швидкий приклад

javascript

element.addEventListener('click', function (event) {
  console.log(event.target);
});

Властивість доступна всередині будь-якого обробника, який приймає об'єкт event.

Що таке event.target

event.target це елемент DOM, на якому вперше сталася подія: клік, введення, наведення тощо.

html

<div id="container">
  <button id="btn">Натисни мене</button>
</div>

javascript

document.querySelector('#container').addEventListener('click', (event) => {
  console.log('event.target:', event.target);
});

Якщо клікнути по кнопці, у консолі буде:

text

event.target: <button id="btn">Натисни мене</button>

Тобто target це елемент, на який клікнули, а не той, на якому висить обробник (#container). Подія спливає від кнопки вгору до контейнера, але властивість target при цьому не змінюється.

target проти currentTarget

Властивість	Що показує
`event.target`	елемент, де сталася подія (внутрішній)
`event.currentTarget`	елемент, на якому висить обробник

javascript

document.querySelector('#container').addEventListener('click', (event) => {
  console.log('target:', event.target);
  console.log('currentTarget:', event.currentTarget);
});

Якщо клікнути по <button> усередині контейнера:

text

target: <button>
currentTarget: <div id="container">

Делегування подій

Це найчастіше застосування event.target.

html

<ul id="list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

javascript

document.querySelector('#list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log(`Клік по елементу: ${event.target.textContent}`);
  }
});

Тут ми навісили один обробник на весь список, а всередині перевіряємо, по якому саме <li> клікнули. Це і називається делегуванням подій: воно економить пам'ять і пришвидшує роботу, особливо коли елементів багато або вони з'являються динамічно.

Робота з формами

javascript

form.addEventListener('input', (event) => {
  console.log('Змінено елемент:', event.target.name);
  console.log('Нове значення:', event.target.value);
});

Це дозволяє відстежувати зміни всіх полів форми через один обробник, не підписуючись на кожен <input> окремо.

Підсумок

Властивість	Що робить
`event.target`	елемент, де сталася подія
`event.currentTarget`	елемент, на якому висить обробник
Для чого використовують	делегування, перевірка джерела події, доступ до елемента, по якому клікнули
Тип даних	DOM-елемент (`HTMLElement`)

Висновок: event.target це справжнє джерело події. З його допомогою можна точно дізнатися, де саме користувач клікнув, увів текст або викликав іншу дію.

Типові помилки

Плутати target з currentTarget і намагатися прочитати dataset контейнера з event.target.
Забувати, що всередині стрілкової функції currentTarget доступний, а після виходу з обробника він уже null: значення треба зберегти одразу.
У делегуванні перевіряти лише event.target.tagName, коли всередині <li> є вкладені елементи: клік по <span> дасть SPAN. Надійніше event.target.closest('li').
Вважати, що event.target завжди елемент: для подій не з DOM (наприклад, XMLHttpRequest) це буде інший об'єкт.
Використовувати this замість currentTarget у стрілковій функції: this там не вказує на елемент.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.