Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Властивість event.target». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`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` там не вказує на елемент.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати514 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.