Пошук уроків, статей та іншого контенту
Дослідите властивості об’єкта Event: type, target, currentTarget, timeStamp та інші корисні дані.
Коли в браузері відбувається подія, наприклад клік, введення тексту або натискання клавіші, браузер створює спеціальний об’єкт події.
Цей об’єкт містить інформацію про подію:
який тип події стався;
на якому елементі вона відбулася;
коли вона відбулася;
які клавіші були натиснуті;
чи можна скасувати стандартну дію браузера.
Об’єкт події автоматично передається обробнику події як аргумент.
const button = document.querySelector('button');
button.addEventListener('click', function (event) {
console.log(event);
});У цьому прикладі параметр event — це об’єкт події. Його часто називають event, eventObject або скорочено e.
button.addEventListener('click', function (e) {
console.log(e);
});Назва параметра не має значення. Важливо, що цей параметр містить дані про поточну подію.
typeВластивість type містить назву події у вигляді рядка.
document.addEventListener('click', function (event) {
console.log(event.type);
});Після кліку в консолі з’явиться:
clickДля різних подій значення буде різним:
element.addEventListener('mouseenter', function (event) {
console.log(event.type); // "mouseenter"
});
input.addEventListener('input', function (event) {
console.log(event.type); // "input"
});
document.addEventListener('keydown', function (event) {
console.log(event.type); // "keydown"
});type корисна, коли один обробник використовується для кількох типів подій або коли потрібно перевірити, яка саме подія сталася.
targettarget — це елемент, на якому фактично відбулася подія.
Розглянемо HTML:
<div id="card">
<button id="save-button">Зберегти</button>
</div>Якщо додати обробник до div, а натиснути на кнопку, властивість target вкаже саме на кнопку:
const card = document.querySelector('#card');
card.addEventListener('click', function (event) {
console.log(event.target);
});У консолі буде елемент:
<button id="save-button">Зберегти</button>За допомогою target можна отримати доступ до натиснутого елемента:
card.addEventListener('click', function (event) {
event.target.style.backgroundColor = 'lightgreen';
});Тепер натиснута кнопка змінить колір фону.
Зазвичай event.target має тип EventTarget. Це означає, що не всі властивості HTML-елемента доступні безпосередньо. На практиці для звичайних елементів DOM часто можна використовувати властивості на кшталт textContent, але важливо пам’ятати про тип об’єкта.
currentTargetcurrentTarget — це елемент, на якому зареєстровано поточний обробник.
const card = document.querySelector('#card');
card.addEventListener('click', function (event) {
console.log('target:', event.target);
console.log('currentTarget:', event.currentTarget);
});Якщо натиснути кнопку всередині card:
event.target — кнопка;
event.currentTarget — div із id="card".
Отже:
target — де подія виникла
currentTarget — на якому елементі працює обробникЦя різниця особливо важлива під час делегування подій.
target і currentTarget<div id="menu">
<button>Головна</button>
<button>Про нас</button>
</div>const menu = document.querySelector('#menu');
menu.addEventListener('click', function (event) {
console.log('Натиснутий елемент:', event.target);
console.log('Елемент з обробником:', event.currentTarget);
});Для будь-якої кнопки:
event.target буде натиснутою кнопкою;
event.currentTarget завжди буде елементом menu.
Не варто замінювати currentTarget на target, якщо вам потрібен саме елемент, на якому зареєстровано обробник.
timeStamptimeStamp містить час, коли відбулася подія.
document.addEventListener('click', function (event) {
console.log(event.timeStamp);
});Значення timeStamp — це число. Зазвичай воно показує кількість мілісекунд від певного початкового моменту, пов’язаного з документом або моментом запуску браузера.
Його можна використовувати для вимірювання проміжку між подіями:
let previousClickTime = null;
document.addEventListener('click', function (event) {
if (previousClickTime !== null) {
const interval = event.timeStamp - previousClickTime;
console.log(`Від попереднього кліку минуло приблизно ${interval} мс`);
}
previousClickTime = event.timeStamp;
});Для простих програм не потрібно перетворювати timeStamp на звичайну дату. Це не те саме, що:
Date.now()timeStamp призначена насамперед для порівняння моментів подій.
bubblesДеякі події можуть поширюватися від дочірнього елемента до його батьківських елементів. Такий процес називається спливанням події.
Властивість bubbles показує, чи підтримує подія спливання.
const container = document.querySelector('#container');
container.addEventListener('click', function (event) {
console.log(event.bubbles);
});Для події click зазвичай буде:
trueЦе означає, що клік на дочірньому елементі може викликати обробники подій на його батьківських елементах.
Наприклад:
<div id="container">
<button id="button">Натиснути</button>
</div>const container = document.querySelector('#container');
const button = document.querySelector('#button');
container.addEventListener('click', function () {
console.log('Обробник контейнера');
});
button.addEventListener('click', function () {
console.log('Обробник кнопки');
});Після кліку на кнопку в консолі з’явиться:
Обробник кнопки
Обробник контейнераПодія виникла на кнопці, а потім поширилася до контейнера.
stopPropagation()Метод stopPropagation() зупиняє поширення події до інших елементів.
const container = document.querySelector('#container');
const button = document.querySelector('#button');
container.addEventListener('click', function () {
console.log('Обробник контейнера');
});
button.addEventListener('click', function (event) {
event.stopPropagation();
console.log('Обробник кнопки');
});Тепер після кліку спрацює лише обробник кнопки:
Обробник кнопкиstopPropagation() не видаляє обробник і не скасовує стандартну дію браузера. Він лише зупиняє поширення події.
Для подій клавіатури, таких як keydown і keyup, об’єкт події містить додаткові властивості.
keykey містить назву або символ натиснутої клавіші.
document.addEventListener('keydown', function (event) {
console.log(event.key);
});Приклади значень:
a
Enter
Escape
ArrowUp
ShiftМожна перевірити конкретну клавішу:
document.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
console.log('Натиснуто Enter');
}
});codecode описує фізичну клавішу на клавіатурі, незалежно від поточної розкладки.
document.addEventListener('keydown', function (event) {
console.log('key:', event.key);
console.log('code:', event.code);
});Для клавіші Enter:
key: Enter
code: EnterДля букв результат може відрізнятися:
key залежить від символу та розкладки;
code зазвичай вказує на фізичне розташування клавіші, наприклад KeyA.
У більшості простих випадків для перевірки введеного символу достатньо key.
Об’єкт події також містить логічні властивості:
ctrlKey;
shiftKey;
altKey;
metaKey.
Вони показують, чи була натиснута відповідна клавіша-модифікатор.
document.addEventListener('keydown', function (event) {
if (event.ctrlKey && event.key === 's') {
console.log('Натиснуто Ctrl + S');
}
});Для macOS замість Ctrl часто використовують клавішу Command, яку перевіряють через metaKey.
Події миші також містять додаткові дані.
clientX і clientYclientX і clientY показують координати курсора відносно видимої області браузера.
document.addEventListener('click', function (event) {
console.log(`Координати: ${event.clientX}, ${event.clientY}`);
});clientX — відстань від лівого краю області перегляду;
clientY — відстань від верхнього краю області перегляду.
Властивість button показує, яку кнопку миші натиснули.
document.addEventListener('mousedown', function (event) {
if (event.button === 0) {
console.log('Ліва кнопка');
}
if (event.button === 1) {
console.log('Середня кнопка');
}
if (event.button === 2) {
console.log('Права кнопка');
}
});Для контекстного меню зазвичай використовують подію contextmenu.
Під час введення даних у поле форми можна отримати елемент, який змінився, через target.
<label>
Ім’я:
<input id="name-input" type="text">
</label>
<p id="result"></p>const input = document.querySelector('#name-input');
const result = document.querySelector('#result');
input.addEventListener('input', function (event) {
result.textContent = `Ви ввели: ${event.target.value}`;
});Тут:
event.target — поле введення;
event.target.value — поточне значення поля.
Якщо обробник зареєстровано безпосередньо на input, можна також використати event.currentTarget.value:
input.addEventListener('input', function (event) {
console.log(event.currentTarget.value);
});preventDefault()Багато подій мають стандартну дію браузера. Наприклад:
натискання посилання відкриває нову адресу;
надсилання форми перезавантажує сторінку;
натискання правої кнопки відкриває контекстне меню.
Метод preventDefault() скасовує таку стандартну дію.
<a id="link" href="https://example.com">Перейти</a>const link = document.querySelector('#link');
link.addEventListener('click', function (event) {
event.preventDefault();
console.log('Перехід скасовано');
});Посилання залишиться на сторінці, а перехід не відбудеться.
defaultPreventedПісля виклику preventDefault() властивість defaultPrevented зазвичай має значення true.
link.addEventListener('click', function (event) {
event.preventDefault();
console.log(event.defaultPrevented); // true
});Це дає змогу перевірити, чи було скасовано стандартну дію події.
Нижче наведено повний приклад, у якому використовуються кілька властивостей об’єкта події.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Об’єкт події</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
#panel {
padding: 20px;
border: 2px solid #444;
}
button {
margin: 5px;
padding: 8px 12px;
}
#output {
margin-top: 20px;
white-space: pre-line;
}
</style>
</head>
<body>
<div id="panel">
<button data-action="save">Зберегти</button>
<button data-action="delete">Видалити</button>
</div>
<p id="output">Натисніть одну з кнопок.</p>
<script>
const panel = document.querySelector('#panel');
const output = document.querySelector('#output');
panel.addEventListener('click', function (event) {
const button = event.target.closest('button');
if (!button) {
return;
}
output.textContent = [
`Тип події: ${event.type}`,
`Натиснутий елемент: ${button.textContent}`,
`Елемент з обробником: ${event.currentTarget.id}`,
`Дія кнопки: ${button.dataset.action}`,
`Час події: ${Math.round(event.timeStamp)} мс`
].join('\n');
});
</script>
</body>
</html>У цьому прикладі:
event.type містить "click";
event.target — елемент, на якому виникла подія;
event.currentTarget — контейнер panel;
event.timeStamp — час виникнення події;
closest('button') допомагає знайти найближчу кнопку;
dataset.action читає значення атрибута data-action.
Обробник зареєстровано лише на контейнері, але він працює для обох кнопок. Це приклад делегування подій.
target і currentTargetcontainer.addEventListener('click', function (event) {
console.log(event.target); // елемент, на якому стався клік
console.log(event.currentTarget); // container
});Якщо всередині контейнера є інші елементи, target може бути будь-яким із них.
preventDefault() без подіїНеправильно:
link.addEventListener('click', function () {
preventDefault();
});Правильно:
link.addEventListener('click', function (event) {
event.preventDefault();
});Метод належить саме об’єкту події.
event.target.value для будь-якої подіїВластивість value має сенс для полів форми. Наприклад, у події кліку на div її може не бути.
document.addEventListener('click', function (event) {
console.log(event.target.value);
});Такий код може повернути undefined, якщо натиснутий елемент не має властивості value.
stopPropagation() може приховати логіку інших обробників і ускладнити налагодження. Використовуйте його лише тоді, коли справді потрібно зупинити поширення події.
key із неправильним значеннямДля спеціальних клавіш використовуються назви:
if (event.key === 'Enter') {
// ...
}
if (event.key === 'Escape') {
// ...
}Не слід очікувати, що Enter матиме значення "\n" у події keydown.
Об’єкт події передається обробнику як аргумент.
type містить назву події.
target — елемент, на якому фактично виникла подія.
currentTarget — елемент, на якому зареєстровано поточний обробник.
timeStamp допомагає визначити час виникнення події.
bubbles показує, чи може подія спливати до батьківських елементів.
stopPropagation() зупиняє поширення події.
preventDefault() скасовує стандартну дію браузера.
Для клавіатурних подій корисні key, code, ctrlKey, shiftKey, altKey і metaKey.
Для подій миші можна використовувати координати clientX, clientY і властивість button.
Для подій форм через event.target можна отримати поточне значення поля.