Для чего использовал фазу погружения события?

Фаза погружения (Capture Phase) события в JavaScript

Фаза погружения (capture phase) — это первая фаза обработки события в DOM, когда событие распространяется от корня дерева вниз к целевому элементу. Это менее известная фаза, но она очень полезна в специфических сценариях.

Три фазы распространения события

Событие в браузере проходит три фазы:

1. Capture Phase (фаза погружения) — событие идет вниз от корня к элементу
2. Target Phase (фаза цели) — событие достигает самого элемента
3. Bubbling Phase (фаза всплытия) — событие идет вверх от элемента к корню

Как использовать Capture Phase?

По умолчанию addEventListener использует Bubbling фазу:

element.addEventListener("click", handler) // useCapture = false
element.addEventListener("click", handler, true) // useCapture = true
element.addEventListener("click", handler, {
  capture: true
})

Пример: разница между Capture и Bubbling

<div id="outer">
  <div id="inner">
    <button id="button">Click me</button>
  </div>
</div>

const outer = document.getElementById("outer")
const inner = document.getElementById("inner")
const button = document.getElementById("button")

outer.addEventListener("click", () => console.log("Outer - CAPTURE"), true)
outer.addEventListener("click", () => console.log("Outer - BUBBLE"), false)

inner.addEventListener("click", () => console.log("Inner - CAPTURE"), true)
inner.addEventListener("click", () => console.log("Inner - BUBBLE"), false)

button.addEventListener("click", () => console.log("Button - CAPTURE"), true)
button.addEventListener("click", () => console.log("Button - BUBBLE"), false)

// При клике на button вывод будет:
// 1. Outer - CAPTURE
// 2. Inner - CAPTURE
// 3. Button - CAPTURE
// 4. Button - BUBBLE
// 5. Inner - BUBBLE
// 6. Outer - BUBBLE

Практические применения Capture Phase

1. Перехват события до дочерних элементов

const container = document.getElementById("container")
const button = document.getElementById("button")

container.addEventListener("click", (event) => {
  if (event.target === button) {
    console.log("Контейнер перехватил клик на кнопку ПЕРЕД кнопкой")
  }
}, true)

button.addEventListener("click", () => {
  console.log("Кнопка обработала клик")
})

2. Глобальная обработка ошибок валидации

const form = document.getElementById("myForm")

form.addEventListener("focusin", (event) => {
  if (event.target.tagName === "INPUT") {
    console.log("Input получит фокус")
  }
}, true)

3. Event delegation с контролем порядка

const list = document.getElementById("myList")

// Capture - логирование
list.addEventListener("click", (event) => {
  console.log("[LOG] Клик произойдет на", event.target.textContent)
}, true)

// Bubbling - обработка
list.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log("[HANDLE] Выбран элемент")
    event.target.classList.add("selected")
  }
}, false)

4. Модальное окно - перехват кликов на фон

const modal = document.getElementById("modal")
const overlay = document.getElementById("overlay")

overlay.addEventListener("click", (event) => {
  if (event.target === overlay) {
    modal.classList.add("hidden")
  }
}, true)

React и Capture Phase

В React используются capture версии событий:

function MyComponent() {
  return (
    <div onClickCapture={() => console.log("Capture") }>
      <button onClick={() => console.log("Bubble") }>
        Click me
      </button>
    </div>
  )
}

// onClickCapture, onChangeCapture, onFocusCapture, onBlurCapture,
// onMouseDownCapture, onMouseUpCapture, onTouchStartCapture и т.д.

Сравнение Capture vs Bubbling

Важные замечания

• stopPropagation() работает в обе фазы - остановит и capture и bubbling
• preventDefault() работает независимо от фазы
• Capture фаза всегда выполняется РАНЬШЕ bubbling фазы
• Большинство событий используют bubbling (по умолчанию)

Вывод

Capture фаза используется для:

• Перехвата события ДО дочерних элементов
• Глобальной обработки и логирования
• Предотвращения действий перед их выполнением
• Модальных окон и dropdown функционала

В большинстве случаев используется Bubbling фаза (по умолчанию), но Capture фаза критична для сложных сценариев управления событиями.