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	9

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

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

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

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

Приклади

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

<header>
  <h2 class="title">Event -> type</h2>
  <p class="description">Показує тип події, яка була ініційована, наприклад, натискання або наведення мишки.</p>
</header>
<main>
  <div class="result">
    <button class="action-btn">Взаємодій зі мною</button>
    <p class="log">Виконай дію на кнопці, щоб побачити тип події.</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button.action-btn {
  padding: 15px 30px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

button.action-btn:hover {
  background-color: #0056b3;
}

p.log {
  margin-top: 15px;
  font-style: italic;
  color: #333;
}

const button = document.querySelector('.action-btn');
const log = document.querySelector('.log');

const handleEvent = function (event) {
  log.textContent = `Подія: ${event.type}`;
};

button.addEventListener('click', handleEvent);
button.addEventListener('mouseover', handleEvent);
button.addEventListener('mouseout', handleEvent);
//# sourceURL=pen.js

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