Размер фонового изображения для заголовка навигационного окна

Банкротство и захват событий - два способа распространения события в API DOM HTML, когда событие происходит в элементе внутри другого элемента, и оба элемента зарегистрировали дескриптор для этого события. Режим распространения событий определяет в , который упорядочивает элементы, получающие событие .

При барботировании событие сначала захватывается и обрабатывается самым внутренним элементом, а затем распространяется на внешние элементы.

С захватом событие сначала захватывается самым внешним элементом и распространяется на внутренние элементы.

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

trickle down, bubble up

blockquote>

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

IE & lt; 9 использует только событие bubbling события , тогда как IE9 + и все основные браузеры поддерживают оба. С другой стороны, производительность барботажа событий может быть несколько ниже для сложных DOM.

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

Пример

В вышеприведенной структуре предположим, что событие click произошло в элементе li.

При захвате модели событие будет обработано сначала div (сначала будут запускаться обработчики событий в div), затем в ul, а затем на последнем в целевом элемент li.

В модели барботирования произойдет обратное: событие будет обрабатываться в первую очередь li, затем ul и, наконец, div Элемент.

Для получения дополнительной информации см.

• Порядок событий на QuirksMode
• addEventListener на MDN
• События Расширенные на QuirksMode

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

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 < divs.length; i++) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}

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;
}

1
    
2
        
3
            
4
                
5
            
        
    

Другой пример в JSFiddle .