Всплытие и перехват

Всплытие

Допустим есть следующий код:

<div onclick="alert('div')">
    <p onclick="alert('p')">
        Пример кода на <button onclick="alert('button')">JavaScript</button>
    </p>
</div>

Пример на JSFiddle

На каждый тег назначено событие, и при клике на тег <button> выполняются все три события, начиня с нижнего, т.е. поочерёдно откроются окна с сообщением «button», «p» и «div».

Данное поведение называется Всплытие (англ. bubbling), т.е. выполнение события текущего элемента и его родителей снизу вверх.

Если же после нажатия на тег <button> надо прекратить выполнять события родительских элементов, то можно отменить «всплытие» через метод stopPropagation().

<div onclick="alert('div')">
    <p onclick="alert('p')">
        Пример кода на <button onclick="alert('button'); event.stopPropagation()">JavaScript</button>
    </p>
</div>

Пример на JSFiddle

В коде выше при нажатии на <button> появится только одно сообщение «button».

Перехват

Тип поведения Перехват (англ. capturing) работает также, как и «всплытие», только выполняет события не снизу вверх, а наоборот, сверху вниз.

Т.е. в случае «перехвата», код ниже, при нажатии на тег <button>, должен показывать сообщения в следующем порядке: «div», «p» и «button».

<div onclick="alert('div')">
    <p onclick="alert('p')">
        Пример кода на <button onclick="alert('button')">JavaScript</button>
    </p>
</div>

Данное поведение используется редко и показана для примера, в основном используется «всплытие».

Поведение «перехват» можно реализовать через метод addEventListener() с третьим параметром true.

var elem = document.getElementById('el');

elem.addEventListener('click', functionName, true);  // поведение «Перехват»
elem.addEventListener('click', functionName, false); // поведение «Всплытие» (по умолчанию)

Пример на JSFiddle

Для поведения «перехват» не рекомендуется использовать метод stopPropagation(), т.к. он прекращает выполнение событий дочерних элементов (включая ссылки и отправки форм).