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

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

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

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

Контент

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

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

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

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

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

Подія (event) в DOM - це **сигнал від браузера**, який повідомляє, що **щось відбулося**:
користувач клікнув, навів мишу, натиснув клавішу, сторінка завантажилася тощо.

---

## Просте визначення

> **Подія** - це об'єкт, який описує дію (користувацьку чи системну), що відбулася в браузері.
> На подію можна **реагувати** за допомогою **обробника (event listener)**.

---

## Приклади подій

| Категорія | Приклади |
|---|---|
| Миша | `click`, `dblclick`, `mousemove`, `mouseover`, `mouseout`, `contextmenu` |
| Клавіатура | `keydown`, `keyup`, `keypress` |
| Введення | `input`, `change`, `focus`, `blur`, `submit` |
| Документ / вікно | `load`, `scroll`, `resize`, `DOMContentLoaded` |
| Різне | `transitionend`, `animationstart`, `drag`, `drop`, `error` |

---

## Приклад: обробка кліку

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

btn.addEventListener('click', () => {
    alert('Кнопку натиснуто!');
  });
</script>
```

Тут:

- `"click"` - тип події,
- функція - **обробник події** (що робити при кліку).

---

## Як працює `addEventListener`

```javascript
element.addEventListener(eventType, handler, options);
```

- `eventType` - назва події (наприклад, `'click'`);
- `handler` - функція, яка викликається при спрацюванні;
- `options` - (необов'язково) прапори на кшталт `{ once: true }` або `{ capture: true }`.

---

## Об'єкт події (`event`)

Коли подія спрацьовує, в обробник передається об'єкт з подробицями:

```javascript
btn.addEventListener('click', (event) => {
  console.log(event.type);  // "click"
  console.log(event.target); // елемент, по якому клікнули
});
```

---

## Спливання та занурення

Події в DOM поширюються по дереву:

1. **Занурення (capture)** - від `document` до цільового елемента.
2. **Ціль (target)** - сама подія на потрібному елементі.
3. **Спливання (bubble)** - назад угору.

Це означає, що одну подію може "зловити" батьківський елемент:

```javascript
document.body.addEventListener('click', () => {
  console.log('Клік по тілу сторінки!');
});
```

---

## Видалення обробника

Щоб видалити слухача:

```javascript
function handleClick() {
  console.log('click!');
}
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick);
```

---

## Особливості

- Можна повісити **декілька** обробників на одну подію.
- Можна обмежити спрацювання одним разом:

```javascript
  btn.addEventListener('click', () => console.log('Один раз'), { once: true });
  ```
- Можна запобігти дії браузера:

```javascript
  form.addEventListener('submit', e => {
    e.preventDefault(); // скасовує відправку форми
  });
  ```

---

## Підсумок

| Поняття | Що це |
|---|---|
| **Подія** | Повідомлення про дію (клік, введення, завантаження тощо) |
| **Обробник** | Функція, яка викликається при події |
| [**event.target**](https://developer.mozilla.org/en-US/docs/Web/API/Event/target) | Елемент, на якому відбулася подія |
| **addEventListener()** | Метод для підписки на подію |
| **removeEventListener()** | Метод для відписки |
| **e.preventDefault()** | Скасовує стандартну поведінку |
| **e.stopPropagation()** | Зупиняє спливання події |

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

Для рев’юера

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

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