Какие знаешь фазы DOM Events

1️⃣ Как кратко ответить

В DOM Events существует три фазы: захват (capture), цель (target) и всплытие (bubble). Сначала событие проходит через фазу захвата, начиная с корневого элемента и доходя до целевого элемента. Затем происходит фаза цели, где событие обрабатывается на целевом элементе. Наконец, событие проходит через фазу всплытия, возвращаясь обратно к корневому элементу.

2️⃣ Подробное объяснение темы

Когда в веб-приложении происходит событие, например, клик мыши, оно проходит через несколько этапов, называемых фазами. Эти фазы определяют, как и в каком порядке обработчики событий будут вызваны. Понимание этих фаз важно для правильного управления событиями и предотвращения нежелательных эффектов.

Фаза захвата (Capture Phase)

Фаза захвата начинается с самого верхнего элемента в DOM-дереве и движется вниз к целевому элементу, на котором произошло событие. На этом этапе обработчики событий, зарегистрированные с использованием addEventListener с третьим параметром true, будут вызваны.

document.addEventListener('click', function() {
  console.log('Document capture');
}, true);
​
document.querySelector('#myElement').addEventListener('click', function() {
  console.log('Element capture');
}, true);

• document.addEventListener('click', ..., true);: Обработчик события для документа, который будет вызван на фазе захвата.
• document.querySelector('#myElement').addEventListener('click', ..., true);: Обработчик события для конкретного элемента, который также будет вызван на фазе захвата.

Фаза цели (Target Phase)

Фаза цели происходит, когда событие достигает целевого элемента. На этом этапе обработчики событий, зарегистрированные на целевом элементе, будут вызваны. Это происходит независимо от того, был ли обработчик зарегистрирован для захвата или всплытия.

document.querySelector('#myElement').addEventListener('click', function() {
  console.log('Element target');
});

• document.querySelector('#myElement').addEventListener('click', ...);: Обработчик события для целевого элемента, который будет вызван на фазе цели.

Фаза всплытия (Bubble Phase)

Фаза всплытия начинается с целевого элемента и движется вверх по дереву DOM к корневому элементу. На этом этапе обработчики событий, зарегистрированные с использованием addEventListener с третьим параметром false или без него, будут вызваны.

document.querySelector('#myElement').addEventListener('click', function() {
  console.log('Element bubble');
});
​
document.addEventListener('click', function() {
  console.log('Document bubble');
});

• document.querySelector('#myElement').addEventListener('click', ...);: Обработчик события для элемента, который будет вызван на фазе всплытия.
• document.addEventListener('click', ...);: Обработчик события для документа, который будет вызван на фазе всплытия.

Применение и важность

Понимание фаз событий важно для управления поведением событий в сложных интерфейсах. Например, если нужно предотвратить выполнение обработчиков на фазе всплытия, можно использовать метод event.stopPropagation(). Это позволяет более точно контролировать, какие обработчики будут вызваны и в каком порядке, что особенно важно в приложениях с динамическим содержимым и сложной структурой DOM.