Вступ до подій та обробників подій

Що таке події у JavaScript?

JavaScript надає механізми для обробки цих подій і виконання певного коду у відповідь, що робить вебзастосунок інтерактивним і динамічним.

Поширені типи подій

Пояснення addEventListener() та підключення обробників подій

Щоб реагувати на події в JavaScript, до елемента підключають обробник подій. Найпоширеніший спосіб зробити це — використати функцію addEventListener(), яка відстежує певні події та викликає функцію, коли подія відбувається.

element.addEventListener('event', function, useCapture);

• event: Тип події, яку потрібно відстежувати (наприклад, 'click', 'submit');
• function: Функція зворотного виклику, яка виконується при спрацюванні події;
• useCapture (необов'язково): Булеве значення, що вказує, чи має подія відстежуватися під час фази захоплення або спливання (за замовчуванням false, тобто відстежується під час фази спливання).

Обробник події кліку

Додаємо обробник події click до кнопки. При натисканні викликається сповіщення.

Слухач подій приєднано до елемента #myButton, і коли користувач натискає кнопку, з'являється вікно з повідомленням з текстом "Button clicked!"

Слухач події submit

Додаємо слухача події для події submit, запобігаючи стандартній поведінці відправки форми для обробки даних за допомогою JavaScript.

Слухач подій на подію submit форми запобігає стандартній відправці за допомогою event.preventDefault(), що дозволяє обробляти дані власним JavaScript-кодом. Після відправки введене ім'я отримується та відображається в абзаці з ID displayName.

Подія натискання клавіші

Додамо слухач події keypress до поля введення. Коли клавішу буде натиснуто, вона відобразиться в абзаці.

Кожного разу, коли натискається клавіша під час введення в поле вводу, натиснута клавіша фіксується у консолі.

Практичний приклад: обробка валідації форми при відправці

Створення логіки для перевірки форми перед її відправленням.

Слухач події submit гарантує, що форма не буде відправлена, якщо обов'язкові поля порожні. Якщо поле імені користувача або пароля порожнє, подія не продовжується, і відображається повідомлення про помилку.