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` полягає в можливості відстежувати кількість кліків. Це стане в нагоді, коли потрібно реагувати на одиничний або подвійний клік різними діями, оскільки просте відстеження часу між кліками може бути неточним.
Порада:	Інколи в браузерах властивість `detail` для подій типу `click` може бути нульовою. Тому важливо перевіряти значення та бути готовим до того, що не всі події будуть мати корисну інформацію в цій властивості.
Порада:	Для кастомних подій у JavaScript ви можете вручну встановити значення `detail`, що дозволить передавати додаткову інформацію під час виклику подій. Це дуже корисно, коли ви хочете створити спеціальні події для свого інтерфейсу.

Синтаксис

event.detail

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі кожен клік на кнопку змінює кількість кліків, яка відображається у clickCount, та виводить різні повідомлення залежно від кількості натискань. Після трійного кліку лічильник скидається, починаючи новий цикл для демонстрації логіки взаємодії.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/RwXKaQy">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

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

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

JS довідник

JavaScript

Наповнення JS розділу