Пузырьки и захват событий - это два способа распространения событий в API HTML DOM, когда событие происходит в элементе внутри другого элемента, и оба элемента зарегистрировали дескриптор этого события.Режим распространения события определяет в , в каком порядке элементы получают событие .
. При пузырьковании событие сначала захватывается и обрабатывается самым внутренним элементом, а затем распространяется на внешние элементы.
При захвате событие сначала захватывается самым внешним элементом и распространяется на внутренние элементы.
Захват также называется «каплей», что помогает запомнить порядок распространения:
стекают, всплывают
В прежние времена Netscape выступал за захват событий, в то время как Microsoft поощряла всплытие событий.Оба являются частью W3C События объектной модели документа * стандарт 1016 * (2000).
IE <9 использует <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener" rel="noreferrer"> только всплывающее окно событий , тогда как IE9 + и все основные браузеры поддерживают оба.С другой стороны, производительность для всплывающих событий может быть немного ниже для сложных DOM.
Мы можем использовать addEventListener(type, listener, useCapture) для регистрации обработчиков событий для всплытия (по умолчанию) или захватаРежим.Чтобы использовать модель захвата, передайте третий аргумент как true.
Пример
<div>
<ul>
<li></li>
</ul>
</div>
В приведенной выше структуре предположим, что в элементе li произошло событие щелчка.
В модели захвата событие будет обработано сначала div (сначала будут срабатывать обработчики щелчка в div), затем в ul, затем в последнем в целевом элементе li.
В пузырьковой модели произойдет обратное: сначала событие будет обработано li, затем ul и, наконец, элементом div.
Для получения дополнительной информации см.
В приведенном ниже примере, если вы щелкнете по любому из выделенных элементов, вы увидите, что сначала происходит фаза захвата потока распространения события, а затемфаза барботирования.
var logElement = document.getElementById('log');
function log(msg) {
logElement.innerHTML += ('<p>' + msg + '</p>');
}
function capture() {
log('capture: ' + this.firstChild.nodeValue.trim());
}
function bubble() {
log('bubble: ' + this.firstChild.nodeValue.trim());
}
function clearOutput() {
logElement.innerHTML = "";
}
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', capture, true);
divs[i].addEventListener('click', bubble, false);
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);
p {
line-height: 0;
}
div {
display:inline-block;
padding: 5px;
background: #fff;
border: 1px solid #aaa;
cursor: pointer;
}
div:hover {
border: 1px solid #faa;
background: #fdd;
}
<div>1
<div>2
<div>3
<div>4
<div>5</div>
</div>
</div>
</div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>
Еще один пример на JSFiddle .