Возбуждение событий и захват событий

Узнайте, как восходящая маршрутизация и захват событий работают в JavaScript

Пузыри и захват - это две модели, которые события DOM используют для распространения.

Предположим, ваша структура DOM

<div id="container">
  <button>Click me</button>
</div>

Вы хотите отслеживать, когда пользователи нажимают наbutton, и у вас есть 2 прослушивателя событий, один на кнопке, а другой на#container.

Помните, что щелчок по дочернему элементу всегда будет распространяться на его родительский элемент, если вы не остановите распространение (см. Ниже).

Эти прослушиватели событий будут вызываться по порядку, и этот порядок определяется используемой моделью восходящей цепочки / захвата событий.

Пузыриозначает, что событие распространяется от элемента, по которому был выполнен щелчок (дочерний элемент), до всего его родительского дерева, начиная с ближайшего.

В нашем примере обработчик наbuttonбудет стрелять до#containerобработчик.

Захватнаоборот: внешние обработчики событий запускаются перед более конкретным обработчиком,button.

По умолчанию всплывают все события.

Вы можете выбрать захват событий, применив третий аргумент кaddEventListener, установив его наtrue:

document.getElementById('container').addEventListener(
  'click',
  () => {
    //window loaded
  },
  true
)

Обратите внимание, чтосначала запускаются все обработчики событий захвата.

Затем все обработчики восходящих событий.

Порядок следует этому принципу: DOM просматривает все элементы, начиная с объекта Window, и ищет элемент, по которому был выполнен щелчок. При этом он вызывает любой обработчик событий, связанный с событием (фаза захвата).

Как только он достигает цели, он затем повторяет путь до родительского дерева до объекта Window, снова вызывая обработчики событий (фаза восходящей цепочки).

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: