Всплывание и захват событий: понимание распространения в DOM

Всплывание и захват событий играют решающую роль в распространении событий в HTML DOM API. Чтобы понять их функциональность, давайте углубимся в тонкости этих двух концепций.

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

Когда событие происходит в элементе, вложенном в другой элемент и оба элемента имеют зарегистрированные обработчики событий для этого конкретного события, режим распространения событий определяет порядок, в котором элементы получают event.

• Всплывание событий: Событие первоначально захватывается и обрабатывается самым внутренним элементом, а затем распространяется наружу к его родительским элементам.
• Event. Захват: Событие сначала захватывается самым внешним элементом и распространяется внутрь его вложенного элемента. elements.

Качание против пузырька

Захват также известен как «качание», термин, который помогает запомнить порядок распространения: «просачиваться вниз, пузыриться». вверх."

Браузер Поддержка

• Netscape представила функцию захвата событий, в то время как Microsoft поддерживала всплытие событий.
• Стандарт W3C Document Object Model Events (2000) включает в себя и то, и другое.
• IE

Аспекты производительности

Всплывание событий может иметь немного более низкую производительность в сложных DOM по сравнению с захватом событий.

Использование

Мы используем addEventListener(type, Listener, useCapture) метод для регистрации обработчиков событий либо в режиме пузырькового (по умолчанию), либо в режиме захвата. Чтобы использовать модель захвата, для третьего аргумента должно быть установлено значение true.

Пример

Рассмотрим следующую структуру HTML:

Если событие щелчка происходит в элементе li:

• В режиме захвата событие сначала обрабатывается элементом div, затем ul и, наконец, элементом li.
• В режиме пузырьков событие сначала обрабатывается li, затем ul и, наконец, div.

Дополнительные ресурсы

• [Порядок событий в QuirksMode](https://www.quirksmode.org/js/events_order.html )
• [addEventListener on MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
• [Продвинутые события в QuirksMode](https://www.quirksmode.org/ js/events/)

Интерактивный Демонстрация

Следующий интерактивный пример иллюстрирует этапы захвата и всплытия при распространении событий:

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML  = ('
'   msg   '
');
}

function capture() {
    log('capture: '   this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: '   this.firstChild.nodeValue.trim());
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i 
При нажатии на любой из выделенных элементов сначала происходит фаза захвата событий, а затем фаза всплытия.