JavaScript HTML DOM Події
HTML DOM дозволяє JavaScript реагувати на події HTML:
Реагування на події
JavaScript може бути виконано, коли відбувається подія, наприклад, коли користувач натискає елемент HTML.
Щоб виконати код, коли користувач натискає елемент, додайте код JavaScript до атрибута події HTML:
onclick=JavaScript
Приклади подій HTML:
- Коли користувач клацає мишею
- Коли веб-сторінка завантажилася
- Коли зображення завантажено
- Коли миша переміщується над елементом
- Коли змінено поле введення
- Коли надсилається форма HTML
- Коли користувач натискає клавішу
У цьому прикладі вміст елемента <h1> змінюється, коли користувач натискає його:
Приклад
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Упс!'">Натисніть на цей текст!</h1>
</body>
</html>
Спробуйте самі »
У цьому прикладі функція викликається з обробника подій:
Приклад
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Натисніть на цей текст!</h1>
<script>
function changeText(id) {
id.innerHTML = "Упс!";
}
</script>
</body>
</html>
Спробуйте самі »
Атрибути подій HTML
Щоб призначити події елементам HTML, ви можете використовувати атрибути події.
Приклад
Призначте подію onclick елементу кнопки:
<button onclick="displayDate()">Спробуй це</button>
Спробуйте самі »
У наведеному вище прикладі функція під назвою displayDate буде виконана після натискання кнопки.
Призначення подій за допомогою HTML DOM
HTML DOM дозволяє призначати події елементам HTML за допомогою JavaScript:
Приклад
Призначте подію onclick елементу кнопки:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Спробуйте самі »
У наведеному вище прикладі функція під назвою displayDate призначається елементу HTML за допомогою id="myBtn".
Функція буде виконана після натискання кнопки.
Події onload та onunload
Події onload та onunload запускаються, коли користувач входить або залишає сторінку.
Подія onload може використовуватися для перевірки типу та версії веб-браузера відвідувача та завантаження відповідної версії веб-сторінки на основі інформації.
Події onload та onunload можна використовувати для обробки файлів cookie.
Подія onchange
Подія onchange часто використовується в поєднанні з перевіркою полів введення.
Нижче наведено приклад використання onchange. Функція upperCase() викликається, коли користувач змінює вміст поля введення.
Події onmouseover та onmouseout
Події onmouseover та onmouseout можна використовувати для запуску функції, коли користувач наводить або виводить курсор з елемента HTML:
Події onmousedown, onmouseup та onclick
Події onmousedown, onmouseup та onclick є частиною клацання миші. Спочатку, коли натиснуто кнопку миші, запускається подія onmousedown, потім, коли кнопку миші відпущено, спрацьовує подія onmouseup, нарешті, коли натискання миші завершено, запускається подія onclick.
Більше прикладів
onmousedown та onmouseup
Зміна зображення, коли користувач утримує кнопку миші.
onload
Відображати вікно сповіщення, коли сторінка завершить завантаження.
onfocus
Змініть колір фону поля введення, коли воно отримує фокус.
Події миші
Змінити колір елемента, коли на нього наводиться курсор.
HTML DOM Довідник об’єкта події
Щоб переглянути список усіх подій HTML DOM, перегляньте повний Довідник об’єктів подій HTML DOM на нашому сайті W3Schools українською.
