JS властивість Event.type
Загальний опис
type — це властивість об'єкта Event, яка повертає тип події, що була викликана. Вона містить назву події у вигляді рядка, наприклад, click, keydown, mouseover, або будь-якої іншої події, яка підтримується браузером. Ця властивість допомагає визначити, який саме тип події був ініційований, і дозволяє створювати обробники для декількох різних подій у межах одного і того ж елемента.
Наприклад, якщо потрібно обробляти кілька різних типів подій для одного елемента, ви можете використати властивість type, щоб умовно визначити, яка саме подія була викликана, і відповідно реагувати на неї.
Приклад:
document.addEventListener('click', function(event) {
console.log(`Подія типу: ${event.type}`);
});
У цьому прикладі, коли користувач натискає на сторінку, обробник події отримує об'єкт події, і event.type повертає рядок "click". Це дозволяє визначити, що саме сталася подія кліку.
Ще одним важливим застосуванням type є створення універсальних обробників подій. Замість того, щоб створювати окремий обробник для кожного типу події, ви можете використовувати один обробник, який перевіряє тип події за допомогою event.type і виконує відповідні дії залежно від того, яка подія була викликана. Наприклад, обробник може реагувати як на кліки, так і на натискання клавіш.
Завдяки властивості type ви можете легко налаштовувати обробку подій, аналізувати поведінку користувачів і робити вашу програму більш гнучкою.
| Порада: | Якщо ви хочете, щоб один обробник подій реагував на кілька типів подій (наприклад, |
| Порада: | Якщо ви створюєте обробники для динамічних елементів, властивість |
| Порада: | Події можуть бути синхронними та асинхронними. Важливо розуміти тип події, особливо в контексті обробки асинхронних подій, щоб коректно керувати чергою подій і не отримати несподіваних результатів. |
Синтаксис
event.typeЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1 |
7 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
14.5.0 |
1.0 |
Приклади
Цей приклад дозволяє користувачу взаємодіяти з кнопкою різними способами (натискання, наведення мишки, вихід курсора). Обробник подій використовує властивість event.type для визначення, яка саме подія була викликана, і відображає її тип у текстовому полі. Користувач може побачити, як змінюється тип події залежно від дії.
У цьому прикладі ми маємо два обробники подій: один для кліків, інший — для натискання клавіш. Використовуючи event.type, ми можемо розрізняти, яка саме подія була ініційована, і реагувати відповідним чином.
document.addEventListener('click', function(event) {
if (event.type === 'click') {
console.log('Обробляємо клік');
}
});
document.addEventListener('keydown', function(event) {
if (event.type === 'keydown') {
console.log(`Обробляємо натискання клавіші: ${event.key}`);
}
});Цей приклад демонструє універсальний обробник подій, який реагує як на кліки, так і на події наведення миші. Використовуючи одну функцію для кількох типів подій, можна легко керувати логікою взаємодії з елементом, залежно від типу події, отриманого через event.type.
const universalHandler = function(event) {
if (event.type === 'click') {
console.log('Клік по елементу');
} else if (event.type === 'mouseover') {
console.log('Навели мишку на елемент');
}
};
const element = document.querySelector('.interactive');
element.addEventListener('click', universalHandler);
element.addEventListener('mouseover', universalHandler);