Obsługa zdarzeń
Naucz się reagować na kliknięcia, wpisywanie tekstu i inne działania użytkownika
Zdarzenie = dzwonek do drzwi
Kiedy ktoś dzwoni do drzwi — reagujesz: idziesz otworzyć. W JavaScript: kiedy użytkownik klika przycisk (zdarzenie) — uruchamia się kod (reakcja). Ten kod-reakcja to handler zdarzenia.
Синтаксис addEventListener
element.addEventListener(тип_події, функція_обробник);- тип_події — рядок:
'click','input','keydown'і т.д. - функція_обробник — звичайна функція або стрілкова, отримує об'єкт події як аргумент
const btn = document.querySelector('button');
// Варіант 1 — звичайна функція
btn.addEventListener('click', function(event) {
console.log('Натиснуто!');
});
// Варіант 2 — стрілкова функція (коротше)
btn.addEventListener('click', (event) => {
console.log('Натиснуто!');
});Об'єкт події (event)
Коли подія спрацьовує, функція отримує об'єкт event з деталями:
| Властивість | Що містить |
|---|---|
event.target | Елемент на якому сталася подія |
event.type | Тип події ('click', 'keydown' ...) |
event.key | Яку клавішу натиснули (для keydown) |
event.value | Значення поля (для input) — через event.target.value |
input.addEventListener('input', (event) => {
console.log(event.target.value); // що ввів юзер
});
document.addEventListener('keydown', (event) => {
console.log(event.key); // 'Enter', 'a', 'ArrowUp'...
if (event.key === 'Enter') console.log('Enter натиснуто!');
});Найпопулярніші типи подій
| Подія | Коли спрацьовує |
|---|---|
click | Клік мишею |
dblclick | Подвійний клік |
input | Будь-яка зміна значення в полі вводу |
change | Зміна після втрати фокусу |
submit | Відправка форми |
keydown | Натискання клавіші |
keyup | Відпускання клавіші |
mouseover | Наведення миші на елемент |
mouseout | Відведення миші від елемента |
focus | Елемент отримав фокус |
blur | Елемент втратив фокус |
event.preventDefault() — зупиняє стандартну поведінку браузера. Без нього submit перезавантажує сторінку, клік по посиланню переходить на нову сторінку.
Якщо додаєш слухача динамічно і він більше не потрібен — видали його через removeEventListener. Це запобігає memory leaks: element.removeEventListener('click', handler). Для видалення передай ту САМУ функцію що і при addEventListener — анонімну функцію видалити не можна.