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 ви можете легко налаштовувати обробку подій, аналізувати поведінку користувачів і робити вашу програму більш гнучкою.

правити

Порада

Якщо ви хочете, щоб один обробник подій реагував на кілька типів подій (наприклад, click та keydown), використовуйте event.type для фільтрації. Це спрощує код і зменшує кількість дублювання логіки.

автор: Bond правити

Порада

Якщо ви створюєте обробники для динамічних елементів, властивість type дозволить вам легко визначати, які події були викликані на новостворених елементах, і на основі цього налаштовувати подальші дії.

автор: Bond правити

Порада

Події можуть бути синхронними та асинхронними. Важливо розуміти тип події, особливо в контексті обробки асинхронних подій, щоб коректно керувати чергою подій і не отримати несподіваних результатів.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.type

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	1	7	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	14.5.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div class="interactive">перший елемент interactive</div>
<div class="interactive">другий елемент interactive</div>

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);

document.addEventListener('click', function(event) {
  if (event.type === 'click') {
    console.log('Обробляємо клік');
  }
});

document.addEventListener('keydown', function(event) {
  if (event.type === 'keydown') {
    console.log(`Обробляємо натискання клавіші: ${event.key}`);
  }
});