Да ладно, «Учись так, как будто тебе 5» — это всего лишь фраза — я не рассказываю здесь игрушечную историю! Но я обещаю, если вы внимательно прочитаете от начала до конца, все станет понятно.

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

Распространение событий

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

• Захват событий (также называемый «качанием»)

• Всплывание событий

Надеюсь, вы поняли идею. Давайте разберемся в обоих примерах.

Всплывание событий

Всплывание событий означает, что когда событие происходит в элементе, оно сначала запускает обработчик событий для этого элемента. Затем он перемещается вверх по дереву DOM, чтобы вызвать обработчики событий его родительских элементов и так далее, пока не достигнет документа или корня дерева DOM.

  Parent Div
  Click Me!

Пример пояснения: Когда вы нажимаете кнопку, появляется сообщение «Кнопка нажата!» Предупреждение отображается первым, потому что событие запускается на кнопке. После этого событие «всплывает» до родительского элемента div, и вы видите сообщение «Родительский элемент Div Clicked!» тревога. Это связано с тем, что событие начинается с кнопки, а затем доходит до родительского элемента div. Итак, этот процесс распространения называется «Пузырь событий».

Захват событий

Захват событий — это противоположность всплытию. Событие начинается с верхней части веб-страницы (начиная с документа) и перемещается вниз к элементу, с которым вы взаимодействовали. Это означает, что сначала будут запущены обработчики событий для родительских элементов, а затем событие переместится вниз к дочернему элементу, с которым вы щелкнули или с которым взаимодействовали.

  Parent Div
  Click Me!

В этом случае, когда вы нажимаете кнопку, появляется сообщение «Родительский Div Clicked!» предупреждение появится первым. Затем «Кнопка нажата!» Предупреждение будет отображаться, потому что событие начинается с уровня документа, сначала захватывает (просачивается) до родительского элемента div, а затем достигает кнопки.

Значение true третьего аргумента addEventListener определяет фазу захвата.

Каждое событие проходит через 3 фазы

Естественно, каждое мероприятие проходит все три фазы:

• Фаза захвата: событие начинается сверху (документ) и перемещается вниз к цели.

• Целевая фаза: событие достигает элемента, с которым вы взаимодействовали (цель).

• Фаза всплытия: после достижения цели событие всплывает обратно через родительские элементы.

Так что да, событие естественным образом проходит через все три фазы, но JavaScript дает вам контроль над тем, на какой фазе будет действовать ваш прослушиватель событий.

Несмотря на то, что события проходят все три фазы, прослушиватели событий JavaScript по умолчанию привязаны к фазе всплывания. Это означает, что когда вы добавляете прослушиватель событий, ничего не указывая, он будет прослушивать событие только на этапе восходящего потока (после того, как событие достигло цели и начало двигаться вверх).

Когда вы передаете true в качестве третьего аргумента, вы указываете JavaScript прослушивать событие на этапе захвата (пока оно перемещается по DOM). Событие по-прежнему проходит все фазы (захват, цель и всплытие), но прослушиватель будет запущен во время фазы захвата, прежде чем событие достигнет целевого элемента.

Переходит ли событие от захвата к всплытию, когда вы используете true? Нет, событие всегда перемещается как через захват, так и через всплытие. Когда вы передаете true, вы не предотвращаете фазу всплеска. Вы просто просите слушателя ответить во время захвата. Событие продолжит захватывать цель, а затем всплывать, как обычно.

Краткое содержание:

• Все события естественным образом проходят этапы захвата, таргетинга и всплытия.

• По умолчанию прослушиватели событий работают во время фазы всплытия (после того, как событие достигает цели и перемещается вверх).

• Когда вы передаете true, вы сообщаете прослушивателю событий вызвать во время фазы захвата (по мере продвижения события вниз).

• Событие по-прежнему проходит все этапы (захват, назначение и всплывание), но ваш слушатель решает, на каком этапе действовать.