Как отловить событие на погружение

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

Для отлова события на фазе погружения в JavaScript используйте метод addEventListener с третьим параметром true. Это указывает, что обработчик должен срабатывать на фазе погружения, а не на фазе всплытия.

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

В JavaScript события могут проходить через три фазы: захват (погружение), цель и всплытие. Понимание этих фаз важно для управления тем, как события обрабатываются в DOM.

1. Фаза захвата (погружение): Событие начинается с самого верхнего элемента DOM и проходит вниз к целевому элементу.
2. Целевая фаза: Событие достигает целевого элемента.
3. Фаза всплытия: Событие начинает подниматься обратно вверх по дереву DOM.

По умолчанию, обработчики событий в JavaScript срабатывают на фазе всплытия. Однако, иногда требуется обработать событие на фазе погружения, например, для перехвата события до того, как оно достигнет целевого элемента.

Для этого используется метод addEventListener, который принимает три параметра:

• Тип события (например, 'click').
• Функция-обработчик события.
• Булевый параметр useCapture, который указывает, на какой фазе должен срабатывать обработчик. Если true, обработчик срабатывает на фазе погружения.

Пример кода:

// Получаем ссылку на элемент, на который хотим повесить обработчик
const parentElement = document.getElementById('parent');
​
// Добавляем обработчик события на фазе погружения
parentElement.addEventListener('click', function(event) {
  console.log('Событие поймано на фазе погружения');
}, true);

• const parentElement = document.getElementById('parent');: Получаем элемент DOM с идентификатором parent, на который будет добавлен обработчик события.
• parentElement.addEventListener('click', function(event) {...}, true);: Добавляем обработчик события click на элемент parentElement. Третий параметр true указывает, что обработчик должен срабатывать на фазе погружения.
• console.log('Событие поймано на фазе погружения');: Когда событие click происходит, и оно находится на фазе погружения, в консоль выводится сообщение.

Использование фазы погружения может быть полезно, когда необходимо перехватить событие до того, как оно достигнет целевого элемента, например, для предотвращения его дальнейшей обработки или для выполнения каких-либо действий на более высоком уровне DOM.