6.1 Об'єкт події
JavaScript надає потужну систему подій, яка дозволяє відстежувати різні дії користувача та інші події, що відбуваються в браузері. Важливим аспектом роботи з подіями є об'єкт події, який містить інформацію про подію та надає методи для її обробки.
Коли подія відбувається, браузер створює об'єкт події, який містить інформацію про цю подію. Цей об'єкт передається в обробник події як аргумент.
Властивості об'єкта події:
type: тип події (наприклад,click,keydown).target: елемент, на якому відбулася подія.currentTarget: елемент, до якого прив'язаний обробник події.eventPhase: фаза, у якій знаходиться подія (захоплення, ціль, спливання).bubbles: логічне значення, що вказує, чи може подія спливати.cancelable: логічне значення, що вказує, чи можна скасувати подію.defaultPrevented: логічне значення, що вказує, чи було запобігнуто дію за замовчуванням.timeStamp: час, коли подія була створена.isTrusted: логічне значення, що вказує, чи була подія ініційована користувачем або скриптом.
Методи об'єкта події:
preventDefault(): скасовує дію за замовчуванням, пов'язану з подією.stopPropagation(): зупиняє подальшу передачу події.stopImmediatePropagation(): зупиняє подальшу передачу події та запобігає виконанню інших обробників подій для поточного елемента.
Приклад використання об'єкта події:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Тип події:', event.type); // Виведе: click
console.log('Ціль події:', event.target); // Виведе: <button id="myButton">Click me</button>
console.log('Поточна ціль:', event.currentTarget); // Виведе: <button id="myButton">Click me</button>
console.log('Фаза події:', event.eventPhase); // Виведе: 2 (Цільова фаза)
console.log('Спливання:', event.bubbles); // Виведе: true
console.log('Скасування:', event.cancelable); // Виведе: true
console.log('Мітка часу:', event.timeStamp); // Виведе час у мілісекундах
console.log('Достовірність:', event.isTrusted); // Виведе: true
});
</script>
</body>
</html>
6.2 Події кліків (Mouse Events)
Події миші генеруються, коли користувач взаємодіє з елементом за допомогою миші:
click: подія клікуdblclick: подія подвійного клікуmousedown: подія натискання кнопки мишіmouseup: подія відпускання кнопки мишіmousemove: подія руху мишіmouseover: подія наведення мишіmouseout: подія виходу миші
Приклад:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Кнопку натиснуто');
console.log('Тип події:', event.type);
console.log('Цільовий елемент:', event.target);
});
</script>
</body>
</html>
6.3 Події завантаження (Load Events)
Події завантаження відбуваються, коли ресурс завершує завантаження:
load: подія, яка відбувається, коли ресурс/сторінка повністю завантаженіDOMContentLoaded: подія, яка відбувається, коли початкова HTML-документація завантажена та розібрана без очікування повного завантаження таблиць стилів, зображень та підкадрів
Приклад:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Example</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Вікно повністю завантажене');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM повністю завантажено та розібрано');
});
</script>
</body>
</html>
6.4 Події фокусу (Focus Events)
Події фокусу генеруються, коли елемент отримує або втрачає фокус.
focus: подія, яка відбувається, коли елемент отримує фокусblur: подія, яка відбувається, коли елемент втрачає фокус
Приклад:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Поле вводу у фокусі');
});
input.addEventListener('blur', function(event) {
console.log('Поле вводу втратило фокус');
});
</script>
</body>
</html>
6.5 Події клавіатури (Keyboard Events)
Події клавіатури генеруються, коли користувач натискає клавіші на клавіатурі:
keydown: подія, яка відбувається, коли клавіша натиснутаkeyup: подія, яка відбувається, коли клавіша відпущенаkeypress: подія, яка відбувається, коли клавіша натиснута та відпущена (застаріла подія, не рекомендується до використання)
Приклад:
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Клавіша натиснута:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Клавіша відпущена:', event.key);
});
</script>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ