Вступ до Подій та Обробників Подій
Що таке події у JavaScript?
JavaScript надає механізми для обробки цих подій та виконання певного коду у відповідь, що робить вебзастосунок інтерактивним і динамічним.
Поширені типи подій
Пояснення addEventListener() та підключення обробників подій
Для реагування на події в JavaScript до елемента підключається обробник подій. Найпоширеніший спосіб зробити це — використати функцію addEventListener(), яка відстежує певні події та викликає функцію, коли подія відбувається.
element.addEventListener('event', function, useCapture);
event: Тип події, яку потрібно відстежувати (наприклад,'click','submit');function: Функція зворотного виклику, яка виконується при виникненні події;useCapture(необов'язково): Логічне значення, що визначає, чи слід обробляти подію на етапі захоплення чи спливання (за замовчуваннямfalse, тобто обробка відбувається на етапі спливання).
Обробник події кліку
Додаємо обробник події click до кнопки. При натисканні викликається сповіщення.
index.html
index.css
index.js
Слухач подій приєднано до елемента #myButton, і коли користувач натискає кнопку, з'являється вікно з повідомленням з текстом "Button clicked!"
Слухач події submit
Додається слухач події для події submit, який запобігає стандартній поведінці надсилання форми для обробки даних за допомогою JavaScript.
index.html
index.css
index.js
Слухач подій на подію submit форми запобігає стандартній відправці за допомогою event.preventDefault(), дозволяючи обробляти дані власним JavaScript-кодом. Після відправки введене ім'я отримується та відображається у параграфі з ідентифікатором displayName.
Подія Keypress
Додамо слухача події keypress до поля введення. Коли натискається клавіша, вона буде відображатися у параграфі.
index.html
index.css
index.js
Кожного разу, коли натискається клавіша під час введення в поле вводу, натиснута клавіша фіксується у консолі.
Практичний приклад: обробка валідації форми при відправці
Створимо логіку для перевірки форми перед її відправленням.
index.html
index.css
index.js
submit слухач подій гарантує, що форма не буде відправлена, якщо обов'язкові поля порожні. Якщо поле імені користувача або пароля порожнє, подія блокується, і відображається повідомлення про помилку.
1. Яке призначення addEventListener()?
2. Який із наведених типів подій НЕ є допустимим для addEventListener()?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
What are some other common event types in JavaScript?
Can you explain how event propagation works?
How do I remove an event listener in JavaScript?
Awesome!
Completion rate improved to 2.22Вступ до Подій та Обробників Подій
Свайпніть щоб показати меню
Що таке події у JavaScript?
JavaScript надає механізми для обробки цих подій та виконання певного коду у відповідь, що робить вебзастосунок інтерактивним і динамічним.
Поширені типи подій
Пояснення addEventListener() та підключення обробників подій
Для реагування на події в JavaScript до елемента підключається обробник подій. Найпоширеніший спосіб зробити це — використати функцію addEventListener(), яка відстежує певні події та викликає функцію, коли подія відбувається.
element.addEventListener('event', function, useCapture);
event: Тип події, яку потрібно відстежувати (наприклад,'click','submit');function: Функція зворотного виклику, яка виконується при виникненні події;useCapture(необов'язково): Логічне значення, що визначає, чи слід обробляти подію на етапі захоплення чи спливання (за замовчуваннямfalse, тобто обробка відбувається на етапі спливання).
Обробник події кліку
Додаємо обробник події click до кнопки. При натисканні викликається сповіщення.
index.html
index.css
index.js
Слухач подій приєднано до елемента #myButton, і коли користувач натискає кнопку, з'являється вікно з повідомленням з текстом "Button clicked!"
Слухач події submit
Додається слухач події для події submit, який запобігає стандартній поведінці надсилання форми для обробки даних за допомогою JavaScript.
index.html
index.css
index.js
Слухач подій на подію submit форми запобігає стандартній відправці за допомогою event.preventDefault(), дозволяючи обробляти дані власним JavaScript-кодом. Після відправки введене ім'я отримується та відображається у параграфі з ідентифікатором displayName.
Подія Keypress
Додамо слухача події keypress до поля введення. Коли натискається клавіша, вона буде відображатися у параграфі.
index.html
index.css
index.js
Кожного разу, коли натискається клавіша під час введення в поле вводу, натиснута клавіша фіксується у консолі.
Практичний приклад: обробка валідації форми при відправці
Створимо логіку для перевірки форми перед її відправленням.
index.html
index.css
index.js
submit слухач подій гарантує, що форма не буде відправлена, якщо обов'язкові поля порожні. Якщо поле імені користувача або пароля порожнє, подія блокується, і відображається повідомлення про помилку.
1. Яке призначення addEventListener()?
2. Який із наведених типів подій НЕ є допустимим для addEventListener()?
Дякуємо за ваш відгук!
