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

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

Event.eventPhase — це властивість, яка повертає числове значення, що вказує поточну фазу обробки події. Події у DOM проходять три фази: фазу захоплення, цільову фазу та фазу спливання. Фаза захоплення відбувається, коли подія переміщується від найкореневішого елемента до цільового. Цільова фаза — це коли подія досягає цільового елемента, і фаза спливання відбувається, коли подія "спливає" від цільового елемента до кореневого.

Значення eventPhase може бути:

1 для фази захоплення,
2 для цільової фази,
3 для фази спливання.

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

Приклад використання eventPhase для відстеження фази події:

element.addEventListener('click', function(event) {
  if (event.eventPhase === 1) {
    console.log('Фаза захоплення');
  } else if (event.eventPhase === 2) {
    console.log('Цільова фаза');
  } else if (event.eventPhase === 3) {
    console.log('Фаза спливання');
  }
}, true);

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

Порада:	При використанні `stopPropagation()` в події, фаза може бути зупинена, але `eventPhase` все одно поверне поточне значення. Це корисно для діагностики та розуміння того, чи дійсно подія була перервана на певній фазі.
Порада:	Можна змінювати порядок обробки подій, комбінуючи `eventPhase` з `addEventListener` та параметром `capture`. Так можна виконувати певну дію тільки під час фази захоплення і пропускати фазу спливання.
Порада:	При налагодженні складних подій, таких як вкладені елементи з різними слухачами, `eventPhase` допомагає ідентифікувати, на якій фазі виникла подія. Це особливо корисно при відстеженні конфліктів між різними елементами.

Синтаксис

event.eventPhase

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/VwoPaGX">
  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>.

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

outerElement.addEventListener('click', function(event) {
  console.log('Зовнішній елемент:', event.eventPhase);
}, true);

innerElement.addEventListener('click', function(event) {
  console.log('Внутрішній елемент:', event.eventPhase);
}, false);

Це корисно, якщо вам потрібно виконувати різні дії в залежності від того, чи подія в захопленні або спливанні. Наприклад, ви можете блокувати певні події в фазі захоплення та дозволити їх тільки в фазі спливання.

element.addEventListener('click', function(event) {
  if (event.eventPhase === 1) {
    console.log('Виконується під час захоплення');
  } else if (event.eventPhase === 3) {
    console.log('Виконується під час спливання');
  }
});

JS довідник

JavaScript

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