Обробка подій урок - курс Javascript та jQuery від Devionity
До користувачів подій можна віднести всі інші, наприклад:
- Зміна розміру вікна
- Скролінг
- Клік
- Наведення курсору миші
- Натискання клавіші
- Введення даних у поле форми
- Закриття вкладки
Код JS може бути доданий як значення атрибута деякої події, тобто
Це означатиме, що подія має відношення до тега, в якому написано атрибут події. Розглянемо основні події веб-документа:
- onclick - клік лівої кнопки миші
- ondblclick - подвійне натискання лівої кнопки миші
- onchange - зміна значення у полі елемента форми
- onfocus – подія фокусування на елементі форми. Ця подія означає перехід елемента форми в стан, готовий до введення даних до нього
- onblur - подія протилежна onfocus onsubmit - подія натискання кнопки відправки форми
- onload – завантаження веб-сторінки у вікно браузера, подія веб-сторінки
Після завантаження сторінки в консоль буде виведено рядок "loaded", а під час кліків на блокові елементи будуть випливати модальні вікна з відповідними повідомленнями.
Як правило, для обробки подій зручно створити окрему функцію і помістити її у значення атрибута однойменної події, щоб не писати в ньому велику кількість рядків коду. Якщо в атрибута значення стоїть директива return , це дає можливість вплинути на виконання цієї події, наприклад якщо атрибут події форми onsubmit містить return false , то відправка форми буде відхилятися.
Розглянемо приклад із використанням форми:
При спробівідправити форму виводитиметься модальне вікно з проханням про підтвердження, а відповідна функція повертатиме значення true або false - таким чином контролюючи відправку форми.