Події елементів форм
Подія submit
Відправлення форми відбувається під час кліку по кнопці з атрибутом type="submit" або натискання клавіші Enter, перебуваючи в будь-якому її текстовому полі. Подію submit можна застосувати для валідації (перевірки) форми перед відправленням, оскільки на об'єкті події існує багато корисних властивостей, пов'язаних з елементами форми. Сабміт форми перезавантажує сторінку, тому не забувайте скасовувати дію за замовчуванням методом preventDefault().
Властивість elements DOM-елемента форми містить об'єкт з посиланнями на усі її елементи, які мають атрибут name. Тому в прикладі ми отримуємо значення полів, звертаючись до login.value і password.value.
Подія change
Відбувається після зміни елемента форми. Для текстових полів або textarea подія відбудеться не на кожному введенні символу, а після втрати фокусу, що не завжди зручно. Наприклад, доки ви набираєте щось у текстовому полі - подія відсутня, але як тільки фокус пропав, відбудеться подія change. Для інших елементів, наприклад, select, чекбоксів і радіо-кнопок, подія change спрацьовує відразу під час вибору значення.
Зверніть увагу на корисні властивості при роботі з елементом <select> в прикладі. Розберіться, що зберігається у властивостях value, selectedIndex і options.
Подія input
Відбувається тільки на текстових полях і textarea, і створюється щоразу при зміні значення елемента, не чекаючи втрати фокусу. На практиці input - це найголовніша подія для роботи з текстовими полями форми.
Подія focus і blur
Елемент отримує фокус під час кліку миші або переходу клавішею Tab. Момент отримання і втрати фокусу - дуже важливий, отримуючи фокус, ми можемо завантажити дані для автозаповнення, почати відстежувати зміни тощо. Під час втрати фокусу - перевірити введені дані.
Під час фокусування елемента відбувається подія focus, а коли фокус зникає, наприклад, користувач клікає в іншому місці екрана, відбувається подія blur. Активувати або скасувати фокус можна програмно, викликавши в коді для елемента однойменні методи focus() і blur().
Фокус може бути тільки на одному елементі сторінки за одиницю часу, і поточний елемент, на якому знаходиться фокус, доступний як document.activeElement.
Багато елементів не можуть отримати фокус. Наприклад, якщо клікнути по <div>, то фокусування на ньому не відбудеться, тому що це не інтерактивний елемент.