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