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

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

Порада

Можна змінювати порядок обробки подій, комбінуючи eventPhase з addEventListener та параметром capture. Так можна виконувати певну дію тільки під час фази захоплення і пропускати фазу спливання.

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

Порада

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

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

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

Синтаксис

event.eventPhase

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

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

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

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

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

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

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