JS властивість Event.detail

Загальний опис

detail — це властивість, яка надає додаткову інформацію про подію інтерфейсу користувача. Значення цієї властивості може варіюватися залежно від типу події. Наприклад, для подій типу click, ця властивість зазвичай містить кількість кліків, зроблених за один раз, тобто одиничний або подвійний клік. Для подій прокрутки миші, як наприклад wheel, detail може відображати величину прокручування.

Коли ми використовуємо властивість detail, вона допомагає отримати детальнішу інформацію про те, як саме була викликана подія. Це особливо корисно для відстеження послідовних дій користувача, таких як подвійний або потрійний клік, або для інтерфейсів, де важливі зміни масштабу або інших елементів керування.

Наприклад, якщо потрібно відрізнити одинарний клік від подвійного для виконання різних дій, ми можемо звернутися до event.detail:

element.addEventListener('click', function(event) {
  if (event.detail === 1) {
    console.log('Одиничний клік');
  } else if (event.detail === 2) {
    console.log('Подвійний клік');
  }
});

У випадках з подіями на колесо миші (наприклад, wheel), значення властивості detail може відображати напрямок та кількість прокрутки:

element.addEventListener('wheel', function(event) {
  console.log('Прокрутка значення: ' + event.detail);
});

Загалом, UIEvent.detail є зручним інструментом для отримання додаткової інформації про дію користувача, особливо коли потрібно реагувати на кількість взаємодій або специфічні події прокрутки чи масштабування. Однак, варто зауважити, що для деяких типів подій (наприклад, keydown) ця властивість не містить корисної інформації, і в таких випадках використання detail буде малоефективним.

правити

Порада

Один з корисних моментів використання властивості detail полягає в можливості відстежувати кількість кліків. Це стане в нагоді, коли потрібно реагувати на одиничний або подвійний клік різними діями, оскільки просте відстеження часу між кліками може бути неточним.

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

Порада

Інколи в браузерах властивість detail для подій типу click може бути нульовою. Тому важливо перевіряти значення та бути готовим до того, що не всі події будуть мати корисну інформацію в цій властивості.

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

Порада

Для кастомних подій у JavaScript ви можете вручну встановити значення detail, що дозволить передавати додаткову інформацію під час виклику подій. Це дуже корисно, коли ви хочете створити спеціальні події для свого інтерфейсу.

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

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

Синтаксис

event.detail

Переглядачі

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

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

Переглядач
	5	6	5	11.6	12

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

Переглядач
	3	18	6	5

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

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

Приклади

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

<div id="demo-element">Демонстраційний елемент</div>

const element = document.getElementById('demo-element');

element.addEventListener('click', function(event) {
  if (event.detail === 2) {
    console.log('Подвійний клік виконаний!');
  }
});

<div id="demo-element">Демонстраційний елемент</div>

const element = document.getElementById('demo-element');

let event = new CustomEvent('customEvent', { detail: { action: 'save', itemId: 123 } });
element.dispatchEvent(event);

element.addEventListener('customEvent', function(event) {
  console.log('Дія:', event.detail.action);
  console.log('ID елементу:', event.detail.itemId);
});