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

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

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

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

Контент

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

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

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

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

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

## Коротко:

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

## Приклад 1: базова різниця

```javascript
<div id="parent">
  <button id="child">Клікни мене</button>
</div>
```

```javascript
const parent = document.querySelector('#parent');
const child = document.querySelector('#child');

parent.addEventListener('click', (event) => {
  console.log('target:', event.target);
  console.log('currentTarget:', event.currentTarget);
});
```

Якщо клікнути по кнопці (`#child`), то в консолі буде:

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

Тобто:

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

## Приклад 2: якщо клікнути прямо по батьківському елементу

Якщо клік по самому `div#parent`, тоді:

```javascript
target: <div id="parent">
currentTarget: <div id="parent">
```

Обидва збіжаться, тому що подія **і виникла**, і **обробляється** на тому самому елементі.

## Чому так?

Тому що події в DOM **спливають**:
вони спочатку відбуваються на конкретному елементі (`target`),
а потім **піднімаються вгору** по дереву - до батьків.

На кожному рівні викликається свій обробник.
І в момент його виклику:

- `currentTarget` = елемент, у якого висить цей обробник,
- `target` = початкове джерело події (не змінюється при спливанні).

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

Дуже частий випадок - один обробник на контейнер:

```javascript
<ul id="menu">
  <li>Головна</li>
  <li>Каталог</li>
  <li>Контакти</li>
</ul>
```

```javascript
const menu = document.querySelector('#menu');

menu.addEventListener('click', (event) => {
  console.log('target:', event.target.textContent);
  console.log('currentTarget:', event.currentTarget.id);
});
```

Якщо клікнути на пункт "Каталог":

```javascript
target: Каталог
currentTarget: menu
```

`target` -> конкретний `<li>`,
`currentTarget` -> сам `<ul>`, де висить обробник.

Саме тому делегування можливе:
ми слухаємо одну подію (`click` на списку),
але через `event.target` визначаємо, на який пункт клікнули.

## Приклад 4: декілька слухачів

```javascript
parent.addEventListener('click', (e) => console.log('parent', e.currentTarget));
child.addEventListener('click', (e) => console.log('child', e.currentTarget));
```

Якщо клікнути по кнопці:

```javascript
child <button id="child">
parent <div id="parent">
```

- Спочатку спрацьовує обробник на кнопці (`target` і `currentTarget` = button),
- Потім подія спливає до `div`, і там уже `currentTarget` = div, а `target` залишається тим самим (button).

## Підсумок

| Властивість | Опис | Змінюється при спливанні? |
|---|---|---|
| `event.target` | Елемент, де подія відбулася | Ні, завжди той самий |
| `event.currentTarget` | Елемент, на якому зараз виконується обробник | Так, на кожному рівні свій |
| Використовується для | Визначити джерело події | Отримати сам елемент-слухач |

> **Запам'ятай просто:**
> `target` - "де сталося",
> `currentTarget` - "хто слухає".

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

Для рев’юера

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

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