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');
}
});Методи
getModifierState (MouseEvent)()- Перевіряє, чи активована вказана модифікаторна клавіша (Shift, Ctrl, Alt тощо).
getModifierState()- Перевіряє, чи активована вказана модифікаторна клавіша під час події клавіатури.
preventDefault()- Зупиняє виконання стандартної поведінки елемента при виникненні події.
stopImmediatePropagation()- Зупиняє поточну подію і перешкоджає виконанню інших обробників.
stopPropagation()- Зупиняє подальше поширення події на батьківські елементи.
Властивості
change- Подія спрацьовує, коли значення елемента форми змінюється та втрачає фокус.
durationchange- Виконує дію, коли змінюється тривалість медіафайлу (аудіо чи відео).
click- Спрацьовує, коли користувач натискає на елемент.
contextmenu- Спрацьовує при виклику контекстного меню правою кнопкою миші.
copy- Спрацьовує, коли користувач копіює текст до буфера обміну.
cut- Спрацьовує, коли користувач вирізає текст до буфера обміну.
dblclick- Спрацьовує, коли користувач двічі клацає лівою кнопкою миші на елементі.
abort- Виникає, коли завантаження медіафайлу скасовується користувачем або програмою.
afterprint- Виконується після завершення друку або закриття вікна попереднього перегляду друку.
animationend- Виконується, коли CSS-анімація завершила своє виконання.
animationiteration- Виконується кожного разу при завершенні одного циклу CSS-анімації.
animationstart- Виконується на початку CSS-анімації після її запуску.
beforeprint- Виконується перед початком друку або відкриттям вікна попереднього перегляду друку.
beforeunload- Виконується перед тим, як користувач залишає сторінку або закриває браузер.
blur- Спрацьовує, коли елемент втрачає фокус.
canplay- Подія сигналізує, що медіафайл можна починати відтворювати, не обов’язково до кінця завантажений.
canplaythrough- Подія сигналізує, що медіафайл можна відтворити до кінця без паузи для буферизації.
drag- Спрацьовує, коли користувач перетягує елемент на веб-сторінці.
dragend- Спрацьовує після завершення перетягування елемента користувачем.
dragenter- Спрацьовує, коли перетягуваний елемент входить в область цільового елемента.
dragleave- Спрацьовує, коли перетягуваний елемент покидає межі цільового елемента.
dragover- Активує подію під час перетягування елемента над зоною призначення.
dragstart- Ініціює перетягування елемента, встановлюючи дані для операції перетягування.
drop- Визначає дію після скидання перетягуваного елемента в цільову зону.
ended- Виконується при завершенні відтворення мультимедійного елемента.
error- Виконується при виникненні помилки під час завантаження ресурсу або виконання медіа.
focus- Спрацьовує, коли елемент отримує фокус (наприклад, поле вводу).
focusin- Викликається, коли елемент отримує фокус або коли фокус переходить до його нащадків.
focusout- Викликається, коли елемент або його нащадки втрачають фокус.
fullscreenchange- Викликається, коли елемент входить у повноекранний режим або виходить із нього.
hashchange- Спрацьовує, коли змінюється фрагмент URL-адреси після символа решітки.
input- Спрацьовує кожного разу, коли користувач змінює значення в полі введення.
keydown- Спрацьовує при натисканні будь-якої клавіші на клавіатурі.
keypress- Спрацьовує, коли користувач натискає клавішу, що генерує символ.
keyup- Спрацьовує, коли користувач відпускає натиснуту клавішу на клавіатурі.
load- Виконується, коли повністю завантажені всі ресурси сторінки, включно з зображеннями та стилями.
loadeddata- Виконується, коли достатньо медіаданих завантажено для початку відтворення.
pause- Викликається, коли відтворення медіафайлу (відео або аудіо) призупиняється користувачем або програмно.
loadstart- Викликається на початку завантаження ресурсу, наприклад, відео або файлу.
message- Використовується для обробки повідомлень між різними вікнами чи вкладками браузера.
mousedown- Реєструє натискання кнопки миші на елементі та запускає відповідний обробник події.
mouseenter- Викликається, коли курсор миші входить на елемент, не реагуючи на дочірні елементи.
mouseleave- Викликається, коли курсор миші виходить з елемента, не враховуючи дочірні елементи.
seeking- Спрацьовує під час зміни позиції відтворення медіафайлу, до завершення перемотування.
mousemove- Реєструє рух курсора миші по елементу або сторінці і запускає відповідний обробник.
mouseover- element.addEventListener('mouseover', function(event) { // обробка події });
mouseout- Викликається, коли курсор миші залишає межі елемента або переходить на дочірній елемент.
mouseup- Викликається, коли користувач відпускає кнопку миші після її натискання.
offline- Використовується для відстеження, коли браузер переходить у режим офлайн.
online- Використовується для відстеження моменту, коли браузер відновлює підключення до інтернету.
open- Використовується для відстеження моменту, коли відкривається веб-сокет або інший комунікаційний канал.
pagehide- Виконується, коли сторінка стає невидимою або користувач покидає її.
pageshow- Виконується, коли сторінка відображається після переходу назад або при завантаженні з кешу.
play- Спрацьовує, коли медіафайл (відео або аудіо) починає відтворюватися або відновлює відтворення після паузи.
paste- Спрацьовує при вставці вмісту з буфера обміну в елемент на сторінці.
playing- Відстежує момент, коли медіа-контент починає відтворюватися після паузи або завантаження.
progress- Відстежує прогрес завантаження медіа-ресурсу, коли частини даних успішно отримані.
select- Спрацьовує, коли користувач виділяє текст у полі введення або текстовій області.
ratechange- Відстежує зміни швидкості відтворення медіа, наприклад, при зміні швидкості відео або аудіо.
resize- Відстежує зміни розміру вікна браузера під час його зміни користувачем.
reset- Відстежує момент, коли форма була скинута до початкового стану.
scroll- Відстежує прокрутку елементів або сторінки, реагуючи на її зміну.
search- Активується, коли користувач вводить або очищає текст у полі пошуку.
seeked- Спрацьовує, коли користувач або скрипт змінює поточну позицію відтворення медіафайлу.
show- Спрацьовує, коли dialog стає видимим на сторінці після виклику методу show.
suspend- Виникає, коли браузер тимчасово зупиняє завантаження медіафайлу для збереження ресурсів.
stalled- Виникає, коли браузер тимчасово перестає отримувати медіадані під час відтворення.
timeupdate- Використовується для відстеження зміни поточного часу під час відтворення мультимедіа.
toggle- Використовується для реагування на зміну стану відкриття або закриття елемента `<details>`.
touchcancel- Викликається, коли сенсорна подія переривається чи скасовується системою або браузером.
touchend- Спрацьовує, коли користувач піднімає палець після дотику до сенсорного екрана.
touchmove- Спрацьовує під час руху пальця по сенсорному екрану після початку торкання.
touchstart- Спрацьовує, коли користувач торкається екрану одним або кількома пальцями.
transitionend- Відслідковує момент завершення CSS-переходу на елементі.
unload- Відслідковує момент, коли користувач залишає сторінку або закриває її.
volumechange- Відслідковує зміни гучності або вимкнення звуку для аудіо або відео елемента.
waiting- Відстежує момент, коли медіа елемент призупиняється через очікування завантаження додаткових даних.
wheel- Відстежує прокручування колеса миші або трекпада на елементі або вікні.
altKey (MouseEvent)- Перевіряє, чи була натиснута клавіша Alt під час події миші.
altKey (KeyboardEvent)- Визначає, чи була натиснута клавіша Alt під час події клавіатури.
eventPhase- Вказує поточну фазу обробки події: захоплення, цільову або фазу спливання.
animationName- Повертає назву анімації, яка активувала подію AnimationEvent
bubbles- Показує, чи буде подія підніматися вгору по ланцюжку DOM елементів (спливати).
inputType- Визначає тип змін, внесених до елементу введення в реальному часі.
button- Визначає, яка кнопка миші була натиснута під час події миші.
buttons- Визначає, які кнопки миші були натиснуті під час події.
isTrusted- Визначає, чи подія була ініційована користувачем або програмно.
cancelable- Визначає, чи може подія бути скасована за допомогою preventDefault.
charCode- Визначає ASCII-код символа, який відповідає натиснутій клавіші.
clientX- Визначає горизонтальну позицію курсора відносно видимої частини вікна.
clientY- Визначає вертикальну позицію курсора відносно видимої частини вікна.
code- Визначає унікальний код клавіші, натиснутої на клавіатурі.
key- Повертає символ клавіші, яка була натиснута, як рядок.
ctrlKey (Mouse)- Визначає, чи була натиснута клавіша "Ctrl" під час події миші.
ctrlKey (Key)- Визначає, чи була натиснута клавіша "Ctrl" під час події клавіатури.
keyCode- Повертає числовий код клавіші, яка була натиснута на клавіатурі.
fullscreenerror- Викликається, коли не вдається увійти або вийти з повноекранного режиму через помилку.
currentTarget- Визначає елемент, на який встановлено слухач подій під час виконання події.
data- Повертає символ або рядок, який був доданий або видалений під час події введення.
propertyName- Повертає назву CSS-властивості, яка змінила своє значення під час анімації переходу.
defaultPrevented- Забезпечує перевірку, чи було скасовано дію події.
deltaX- Визначає величину горизонтального прокручування, здійсненого колесом миші.
deltaMode- Вказує одиницю вимірювання для значень `deltaX`, `deltaY` та `deltaZ`.
deltaZ- Визначає величину зсуву по осі Z під час прокручування.
invalid- Спрацьовує, коли значення в полі форми є невалідним відповідно до вбудованих правил валідації.
detail- Вказує кількість разів, коли подія була ініційована або додаткову інформацію про подію.
elapsedTime- Визначає час, що минув від початку анімації до моменту події.
location- Вказує фізичне розташування натиснутої клавіші на клавіатурі.
metaKey (Mouse)- Перевіряє, чи була натиснута клавіша `Meta` під час події миші.
metaKey (Key)- Перевіряє, чи була натиснута клавіша `Meta` під час події клавіатури.
newURL- Повертає новий повний URL після зміни частини адреси після знаку `#`.
relatedTarget (Mouse)- Повертає елемент, на який перемістився або з якого вийшов курсор під час подій миші.
oldURL- Повертає URL сторінки до зміни фрагмента (hash) у адресному рядку.
offsetX- Визначає горизонтальну позицію курсора відносно елемента, на якому спрацювала подія.
offsetY- Повертає вертикальну позицію курсора відносно елемента, на якому спрацювала подія.
relatedTarget (Focus)- Повертає елемент, на який або з якого був переміщений фокус під час події фокуса.
pageX- Повертає горизонтальну позицію курсора миші відносно початку документа.
pageY- Визначає вертикальну позицію курсора миші відносно початку сторінки.
timeStamp- Вказує час у мілісекундах, коли подія була ініційована від моменту завантаження сторінки.
persisted- Визначає, чи сторінка була збережена в кеші браузера для швидшого завантаження.
screenX- Повертає горизонтальну координату курсору миші відносно екрана.
screenY- Визначає вертикальну координату курсору миші відносно початку екрана.
shiftKey (Mouse)- Визначає, чи була натиснута клавіша "Shift" під час події миші.
shiftKey (Key)- Визначає, чи була натиснута клавіша "Shift" під час події клавіатури.
target- Повертає елемент, на якому було ініційовано подію.
targetTouches- Повертає список точок дотику, які взаємодіють з елементом, на якому сталася подія.
touches- Повертає список всіх точок дотику, активних у поточній події на екрані пристрою.
type- Повертає рядок із типом події, яка була ініційована.
which (Mouse)- Дозволяє визначити, яка кнопка миші була натиснута під час події.
which (Key)- Дозволяє визначити, яку клавішу натиснув користувач під час події клавіатури.
view- Вказує на вікно або контекст, у якому була створена подія.