JS об'єкт Event
Введення в об'єкт Event
Об'єкт Event у JavaScript представляє подію, яка відбулась у вашому браузері на веб-сторінці. Це може бути що-небудь: від кліка мишею чи натискання клавіши на клавіатурі до завантаження сторінки або зміни розміру вікна браузера. Кожна подія має свій об'єкт Event, який містить інформацію про неї.
document.addEventListener('click', function(event) {
console.log(event);
});
У цьому прикладі ми додаємо обробник подій до документа, який буде "слухати" подію "click". Якщо десь на сторінці відбудеться клік, функція з внутрішнім кодом активується. Всередині функції ми можемо вивести об'єкт події, що створився, у консоль.
Важливо зрозуміти, що об'єкт Event — це тимчасовий об'єкт, який створюється лише на час обробки події. Він містить інформацію про поточний стан події, наприклад, про те, яка клавіша була натиснута або де відбувся клік мишею на сторінці.
Окрім цього, об'єкт Event містить методи, що дозволяють контролювати подію: переривати її поширення, запобігати діям за замовчуванням та інше. Завдяки цьому можна створювати більш розширені та налаштовані реакції на події користувача.
Властивості об'єкта Event
Об'єкт Event в JavaScript включає в себе численні властивості, що дозволяють зрозуміти контекст, у якому відбулась подія. Властивості допомагають отримувати конкретну інформацію про подію та реагувати на неї відповідним чином.
event.target: Ця властивість вказує на об'єкт, де відбулась подія. Наприклад, якщо користувач клікнув на кнопку, event.target буде цією кнопкою.
document.addEventListener('click', function(event) {
console.log(event.target);
});
У цьому прикладі, при кліку будь-де на сторінці, в консоль буде виведено елемент, на який було здійснено клік. Це може бути, наприклад, параграф тексту, зображення чи інший елемент сторінки.
event.type: Показує тип події (наприклад, "click", "keydown").
document.addEventListener('click', function(event) {
console.log(event.type); // виведе "click"
});
Тут ми слухаємо клік по документу. Коли користувач клікає, у консоль виводиться тип події, у даному випадку — "click".
event.currentTarget: Ця властивість вказує на елемент, до якого було призначено обробник події, в той час як event.target може вказувати на дочірній елемент.
button.addEventListener('click', function(event) {
console.log(event.currentTarget); // буде кнопка, незалежно від місця кліку
});
У вищезазначеному прикладі, навіть якщо всередині кнопки є інші елементи (наприклад, текст чи іконка) і клік відбувається по них, event.currentTarget завжди буде вказувати на кнопку.
event.timestamp: Час відбування події у мілісекундах від моменту завантаження сторінки.
document.addEventListener('click', function(event) {
console.log(event.timestamp);
});
Коли користувач клікає на сторінку, у консоль виводиться час від початку завантаження сторінки до моменту кліку в мілісекундах.
Розуміння та використання властивостей об'єкта Event дозволяє глибше взаємодіяти з користувачем і точніше реагувати на його дії на веб-сторінці. Кожна властивість дає вам додаткову інформацію, яка може бути використана для реалізації різних сценаріїв взаємодії з користувачем.
Делегування подій
Однією з ключових особливостей роботи з об'єктом Event є можливість делегування подій. Ідея полягає в тому, щоб додати один обробник подій до батьківського елемента замість додавання окремих обробників до кожного дитячого елемента. Коли подія відбувається на дитячому елементі, вона "поширюється" вверх до батьківського елемента, де її можна обробити.
Приклад:
let ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log(event.target.textContent);
}
});
У цьому прикладі ми додаємо обробник подій до елемента <ul>. Коли користувач клікає на будь-який елемент <li> всередині <ul>, обробник виводить текст цього елемента. Таким чином, нам не потрібно додавати окремі обробники до кожного <li>, що є дуже ефективним для великих списків або коли елементи динамічно додаються на сторінку.
| Нотатка: | Робота з об'єктом |
| Порада: | Не блокуйте дії за замовчуванням без потреби. Коли ви використовуєте метод |
| Порада: | Використовуйте делегування подій. Замість того, щоб додавати обробник подій до кожного елемента окремо, додайте один обробник до їх спільного предка. Це не тільки поліпшить продуктивність, але і спростить управління динамічно доданими елементами. |
| Порада: | Будьте обережні із порядком подій. Різні браузери можуть виводити події в різному порядку. Наприклад, подія "focus" може виконуватися перед чи після події "click" в залежності від браузера. Тому завжди тестуйте свій код в різних браузерах. |
| Порада: | Пам'ятайте різницю між |
Синтаксис
let obj = new Event();Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
4 |
1 |
4 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
14.5.0 |
1.0 |
Приклади
Ви можете використовувати об'єкт Event для перевірки даних у полях форми перед її відправленням. Якщо дані некоректні, ви можете використовувати event.preventDefault(), щоб запобігти відправці форми.
У прикладі ми додаємо обробник подій для події "submit" форми. Якщо поле з ідентифікатором "name" порожнє, ми виводимо повідомлення та зупиняємо відправлення форми.
document.querySelector('form').addEventListener('submit', function(event) {
var name = document.querySelector('#name').value;
if(name === "") {
alert('Будь ласка, введіть ваше ім'я!');
event.preventDefault();
}
});Додавання обробників подій до кожного елемента може бути неефективним. Замість цього можна використовувати делегування подій, додавши один обробник до їх спільного предка.
У прикладі ми додаємо обробник подій для кліків усередині списку. Якщо клік відбувся на елементі li, ми виводимо його вміст.
document.querySelector('ul').addEventListener('click', function(event) {
if(event.target.tagName === 'LI') {
alert(event.target.textContent);
}
});Об'єкт Event може бути використаний для створення системи вкладок на веб-сторінці, де клік по одній вкладці показує відповідний контент, а інші вкладки стають прихованими.
У цьому прикладі, коли користувач клікає по вкладці (елемент з класом 'tab'), всі блоки контенту спочатку стають прихованими. Потім відображається блок контенту, що відповідає вибраній вкладці.
document.querySelector('.tabs').addEventListener('click', function(event) {
if(event.target.classList.contains('tab')) {
document.querySelectorAll('.content').forEach(function(content) {
content.classList.add('hidden');
});
var tabContent = document.querySelector(event.target.dataset.tabTarget);
tabContent.classList.remove('hidden');
}
});Методи
Властивості
change- Подія спрацьовує, коли значення елемента форми змінюється та втрачає фокус.
click- Спрацьовує, коли користувач натискає на елемент.
contextmenu- Спрацьовує при виклику контекстного меню правою кнопкою миші.
copy- Спрацьовує, коли користувач копіює текст до буфера обміну.
cut- Спрацьовує, коли користувач вирізає текст до буфера обміну.
abort- Виникає, коли завантаження медіафайлу скасовується користувачем або програмою.
afterprint- Виконується після завершення друку або закриття вікна попереднього перегляду друку.
animationend- Виконується, коли CSS-анімація завершила своє виконання.
dblclick- Спрацьовує, коли користувач двічі клацає лівою кнопкою миші на елементі.
animationiteration- Виконується кожного разу при завершенні одного циклу CSS-анімації.
animationstart- Виконується на початку CSS-анімації після її запуску.
beforeprint- Виконується перед початком друку або відкриттям вікна попереднього перегляду друку.
beforeunload- Виконується перед тим, як користувач залишає сторінку або закриває браузер.
blur- Спрацьовує, коли елемент втрачає фокус.
canplay- Подія сигналізує, що медіафайл можна починати відтворювати, не обов’язково до кінця завантажений.
canplaythrough- Подія сигналізує, що медіафайл можна відтворити до кінця без паузи для буферизації.
drag- Спрацьовує, коли користувач перетягує елемент на веб-сторінці.
dragend- Спрацьовує після завершення перетягування елемента користувачем.
dragenter- Спрацьовує, коли перетягуваний елемент входить в область цільового елемента.
dragleave- Спрацьовує, коли перетягуваний елемент покидає межі цільового елемента.
dragover- Дозволяє перетягувати елементи над цільовим елементом, підтримуючи скидання.
dragstart- Ініціює перетягування елемента, встановлюючи дані для операції перетягування.
drop- Визначає дію після скидання перетягуваного елемента в цільову зону.
durationchange- Виконує дію, коли змінюється тривалість медіафайлу (аудіо чи відео).
ended- Виконується при завершенні відтворення мультимедійного елемента.
error- Виконується при виникненні помилки під час завантаження ресурсу або виконання медіа.
focus- Спрацьовує, коли елемент отримує фокус (наприклад, поле вводу).
focusin- Викликається, коли елемент отримує фокус або коли фокус переходить до його нащадків.
focusout- Викликається, коли елемент або його нащадки втрачають фокус.
fullscreenchange- Викликається, коли елемент входить у повноекранний режим або виходить із нього.
fullscreenerror- Викликається, коли не вдається увійти або вийти з повноекранного режиму через помилку.
hashchange- Спрацьовує, коли змінюється фрагмент URL-адреси після символа решітки.
input- Спрацьовує кожного разу, коли користувач змінює значення в полі введення.
invalid- Спрацьовує, коли значення в полі форми є невалідним відповідно до вбудованих правил валідації.
keydown- Спрацьовує при натисканні будь-якої клавіші на клавіатурі.
keypress- Спрацьовує, коли користувач натискає клавішу, що генерує символ.
keyup- Спрацьовує, коли користувач відпускає натиснуту клавішу на клавіатурі.
load- Виконується, коли повністю завантажені всі ресурси сторінки, включно з зображеннями та стилями.
loadeddata- Виконується, коли достатньо медіаданих завантажено для початку відтворення.
loadstart- Викликається на початку завантаження ресурсу, наприклад, відео або файлу.
seeked- Спрацьовує, коли користувач або скрипт змінює поточну позицію відтворення медіафайлу.
message- Використовується для обробки повідомлень між різними вікнами чи вкладками браузера.
mousedown- Реєструє натискання кнопки миші на елементі та запускає відповідний обробник події.
mouseenter- Викликається, коли курсор миші входить на елемент, не реагуючи на дочірні елементи.
mouseleave- Викликається, коли курсор миші виходить з елемента, не враховуючи дочірні елементи.
mousemove- Реєструє рух курсора миші по елементу або сторінці і запускає відповідний обробник.
mouseover- element.addEventListener('mouseover', function(event) { // обробка події });
mouseout- Викликається, коли курсор миші залишає межі елемента або переходить на дочірній елемент.
mouseup- Викликається, коли користувач відпускає кнопку миші після її натискання.
offline- Використовується для відстеження, коли браузер переходить у режим офлайн.
online- Використовується для відстеження моменту, коли браузер відновлює підключення до інтернету.
pause- Викликається, коли відтворення медіафайлу (відео або аудіо) призупиняється користувачем або програмно.
open- Використовується для відстеження моменту, коли відкривається веб-сокет або інший комунікаційний канал.
pagehide- Виконується, коли сторінка стає невидимою або користувач покидає її.
pageshow- Виконується, коли сторінка відображається після переходу назад або при завантаженні з кешу.
paste- Спрацьовує при вставці вмісту з буфера обміну в елемент на сторінці.
play- Спрацьовує, коли медіафайл (відео або аудіо) починає відтворюватися або відновлює відтворення після паузи.
seeking- Спрацьовує під час зміни позиції відтворення медіафайлу, до завершення перемотування.
playing- Відстежує момент, коли медіа-контент починає відтворюватися після паузи або завантаження.
ratechange- Відстежує зміни швидкості відтворення медіа, наприклад, при зміні швидкості відео або аудіо.
progress- Відстежує прогрес завантаження медіа-ресурсу, коли частини даних успішно отримані.
resize- Відстежує зміни розміру вікна браузера під час його зміни користувачем.
reset- Відстежує момент, коли форма була скинута до початкового стану.
scroll- Очищає всі поля форми, повертаючи їх до початкових значень за замовчуванням.
search- Активується, коли користувач вводить або очищає текст у полі пошуку.
stalled- Виникає, коли браузер тимчасово перестає отримувати медіадані під час відтворення.
select- Спрацьовує, коли користувач виділяє текст у полі введення або текстовій області.
show- Спрацьовує, коли dialog стає видимим на сторінці після виклику методу show.
suspend- Виникає, коли браузер тимчасово зупиняє завантаження медіафайлу для збереження ресурсів.
timeupdate- Використовується для відстеження зміни поточного часу під час відтворення мультимедіа.
toggle- Використовується для реагування на зміну стану відкриття або закриття елемента `<details>`.
touchcancel- Подія спрацьовує, коли торкання екрана переривається через непередбачені обставини.
touchend- Спрацьовує, коли користувач піднімає палець після дотику до сенсорного екрана.
touchmove- Спрацьовує під час руху пальця по сенсорному екрану після початку торкання.
touchstart- Спрацьовує, коли користувач торкається екрану одним або кількома пальцями.
transitionend- Відслідковує момент завершення CSS-переходу на елементі.
elapsedTime- Визначає час, що минув від початку анімації до моменту події.
unload- Відслідковує момент, коли користувач залишає сторінку або закриває її.
volumechange- Відслідковує зміни гучності або вимкнення звуку для аудіо або відео елемента.
waiting- Відстежує момент, коли медіа елемент призупиняється через очікування завантаження додаткових даних.
wheel- Відстежує прокручування колеса миші або трекпада на елементі або вікні.
altKey- Перевіряє, чи була натиснута клавіша Alt під час події миші.
altKey (KeyboardEvent)- Визначає, чи була натиснута клавіша Alt під час події клавіатури.
eventPhase- Вказує поточну фазу обробки події: захоплення, цільову або фазу спливання.
animationName- Повертає назву анімації, яка активувала подію AnimationEvent
bubbles- Показує, чи буде подія підніматися вгору по ланцюжку DOM елементів (спливати).
inputType- Визначає тип змін, внесених до елементу введення в реальному часі.
button- Визначає, яка кнопка миші була натиснута під час події миші.
buttons- Визначає, які кнопки миші були натиснуті під час події.
cancelable- Визначає, чи може подія бути скасована за допомогою preventDefault.
charCode- Визначає ASCII-код символа, який відповідає натиснутій клавіші.
clientX- Визначає горизонтальну позицію курсора відносно видимої частини вікна.
isTrusted- Визначає, чи подія була ініційована користувачем або програмно.
clientY- Визначає вертикальну позицію курсора відносно видимої частини вікна.
code- Визначає унікальний код клавіші, натиснутої на клавіатурі.
key- Повертає символ клавіші, яка була натиснута, як рядок.
ctrlKey (Mouse)- Визначає, чи була натиснута клавіша "Ctrl" під час події миші.
ctrlKey (Key)- Визначає, чи була натиснута клавіша "Ctrl" під час події клавіатури.
currentTarget- Визначає елемент, на який встановлено слухач подій під час виконання події.
data- Повертає символ або рядок, який був доданий або видалений під час події введення.
defaultPrevented- Забезпечує перевірку, чи було скасовано дію події.
deltaX- Визначає величину горизонтального прокручування, здійсненого колесом миші.
deltaZ- Визначає величину зсуву по осі Z під час прокручування.
deltaMode- Вказує одиницю вимірювання для значень `deltaX`, `deltaY` та `deltaZ`.
detail- Вказує кількість разів, коли подія була ініційована або додаткову інформацію про подію.
keyCode- Повертає числовий код клавіші, яка була натиснута на клавіатурі.
location- Вказує фізичне розташування натиснутої клавіші на клавіатурі.
metaKey (Mouse)- Перевіряє, чи була натиснута клавіша `Meta` під час події миші.
metaKey (Key)- Перевіряє, чи була натиснута клавіша `Meta` під час події клавіатури.
newURL- Повертає новий повний URL після зміни частини адреси після знаку `#`.
oldURL- Повертає URL сторінки до зміни фрагмента (hash) у адресному рядку.
offsetX- Визначає горизонтальну позицію курсора відносно елемента, на якому спрацювала подія.
offsetY- Повертає вертикальну позицію курсора відносно елемента, на якому спрацювала подія.
pageX- Повертає горизонтальну позицію курсора миші відносно початку документа.
pageY- Визначає вертикальну позицію курсора миші відносно початку сторінки.