Що таке подія в DOM?

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

Подія (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>

<script>
  const btn = document.querySelector('#btn');

  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 поширюються по дереву:

Занурення (capture) - від document до цільового елемента.
Ціль (target) - сама подія на потрібному елементі.
Спливання (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	Елемент, на якому відбулася подія
addEventListener()	Метод для підписки на подію
removeEventListener()	Метод для відписки
e.preventDefault()	Скасовує стандартну поведінку
e.stopPropagation()	Зупиняє спливання події

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

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

Premium

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