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

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

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

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

Контент

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

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

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

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

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

`event.target` - одна з найкорисніших властивостей об'єкта події.
Вона показує **той елемент, на якому подія відбулася фактично**,
тобто **"джерело" події**.

## Визначення

> `event.target` - це **елемент DOM**, на якому **вперше відбулася подія** (наприклад, клік, введення, наведення тощо).

Його можна отримати всередині обробника події, який приймає об'єкт `event`:

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

## Приклад 1: базовий

```javascript
<div id="container">
  <button id="btn">Click me</button>
</div>
```

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

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

```javascript
event.target: <button id="btn">Click me</button>
```

Тобто `target` = елемент, на який клікнули,
а не той, на якому "висить" обробник (`#container`).

## Приклад 2: відмінність від `currentTarget`

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

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

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

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

## Приклад 3: делегування подій

Це одне з найчастіших застосувань `event.target`.

```javascript
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

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

Тут ми навісили **один обробник на весь список**,
а всередині перевіряємо, по якому саме `<li>` клікнули.

Це називається **делегування подій** -
економить пам'ять і пришвидшує роботу, особливо якщо елементів багато.

## Приклад 4: у формах

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

Дозволяє відстежувати зміни всіх полів форми через **один** обробник.

## Підсумок

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

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

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

Для рев’юера

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

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