5.1 Основи роботи з подіями
Події в JavaScript дозволяють взаємодіяти з користувачем та реагувати на його дії, такі як кліки мишею, натискання клавіш, зміни у формах та багато іншого. Розуміння того, як додавати і видаляти обробники подій — важлива частина розробки інтерактивних веб-застосунків.
Що таке події?
Подія — це сигнал від браузера, який повідомляє, що щось сталося. Наприклад, користувач клікнув по кнопці або завантажилася сторінка. Події дозволяють виконувати певні дії у відповідь на ці сигнали.
Типи подій
Існує багато типів подій. Деякі з найчастіше використовуваних включають:
- Миша:
click,dblclick,mouseover,mouseout,mousedown,mouseup,mousemove - Клавіатура:
keydown,keyup,keypress - Форма:
submit,change,focus,blur - Документ/Вікно:
load,resize,scroll,unload
Обробники подій
Обробники подій (або слухачі подій) — це функції, які виконуються у відповідь на певну подію. Вони "слухають" певні події та виконуються, коли ці події відбуваються.
5.2 Додавання обробників подій
Додавання обробників подій за допомогою addEventListener
Метод addEventListener дозволяє додавати обробники подій до елементів. Він надає більшу гнучкість і контроль у порівнянні з традиційними методами додавання подій, такими як використання атрибутів HTML (onclick, onchange тощо).
Синтаксис:
element.addEventListener(event, handler, options);
Де:
element: елемент, до якого додається обробник подіїevent: тип події, на яку треба реагувати (наприклад, 'click', 'input', 'keydown')handler: функція, яка буде викликана при виникненні подіїoptions: додаткові параметри (необов'язковий аргумент)
Приклад: Додавання обробника події click
У цьому прикладі обробник події додається до кнопки. Коли користувач клікає по кнопці, з'являється повідомлення.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Кнопку натиснуто!');
});
</script>
</body>
</html>
Приклад: Додавання декількох обробників подій
За допомогою addEventListener можна додавати кілька обробників для однієї події.
У цьому прикладі два обробники події додаються до кнопки. При кліку обидва обробники виконуються послідовно, виводячи відповідні повідомлення в консоль.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('Перший обробник');
});
button.addEventListener('click', function() {
console.log('Другий обробник');
});
</script>
</body>
</html>
5.3 Використання параметра options
Параметр options дозволяє налаштувати поведінку обробника подій. Найчастіше використовувані опції:
once: якщоtrue, обробник викликається лише один раз, після чого автоматично видаляєтьсяcapture: якщоtrue, подія обробляється під час фази захоплення замість фази спливанняpassive: якщоtrue, вказує, що обробник ніколи не викличеpreventDefault()
Приклад: Обробник, який виконується тільки один раз
У цьому прикладі обробник події спрацьовує лише один раз, після чого автоматично видаляється.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Це буде показано лише один раз');
}, { once: true });
</script>
</body>
</html>
5.4 Видалення обробників подій
Видалення обробників подій за допомогою removeEventListener
Метод removeEventListener дозволяє видаляти обробники подій, які були додані за допомогою addEventListener. Для цього необхідно передати ті ж аргументи, які використовувалися під час додавання обробника.
Синтаксис:
element.removeEventListener(event, handler, options)
Де:
element: елемент, у якого видаляється обробник подіїevent: тип події, обробник якої треба видалитиhandler: функція, яка була призначена як обробник подіїoptions: додаткові параметри (мають збігатися з параметрами, використаними під час додавання обробника)
Приклад: Видалення обробника події click
У цьому прикладі обробник події click додається до кнопки. Натискання на іншу кнопку видаляє обробник події click.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<button id="removeButton">Remove Click Handler</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeButton');
function clickHandler() {
alert('Кнопку натиснуто!');
}
button.addEventListener('click', clickHandler);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', clickHandler);
alert('Обробник click видалено');
});
</script>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ