Event Bubbling and Capturing

The DOM has two ways for objects to detect events: from the top down, and from the bottom up. The first method is known as event capture, the second is called event bubbling.

Event capturing

When you use event capturing

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------
  • The event handler of element1 fires first, the event handler of element2 fires last.
  • With capturing, the event is first captured by the outermost element and propagated to the inner elements.

 

Event bubbling

When you use event bubbling

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------
  • The event handler of element2 fires first, the event handler of element1 fires last.
  • With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.

 

Capturing is also called “trickling”, which helps remember the propagation order:

trickle down, bubble up

Back in the old days, Netscape advocated event capturing, while Microsoft promoted event bubbling. Both are part of the W3C Document Object Model Events standard (2000).

IE < 9 uses only event bubbling, whereas IE9+ and all major browsers support both. On the other hand, the performance of event bubbling may be slightly lower for complex DOMs.

We can use the addEventListener(type, listener, useCapture) to register event handlers for in either bubbling (default) or capturing mode. To use the capturing model pass the third argument as true.

Example

<div>
    <ul>
        <li></li>
    </ul>
</div>

In the structure above, assume that a click event occurred in the li element.

In capturing model, the event will be handled by the div first (click event handlers in the div will fire first), then in the ul, then at the last in the target element, li.

In the bubbling model, the opposite will happen: the event will be first handled by the li, then by the ul, and at last by the div element.

For more information, see

 

Example

In the example below, if you click on any of the highlighted elements, you can see that the capturing phase of the event propagation flow occurs first, followed by the bubbling phase.
Javascript Code:

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

CSS:

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

HTML:

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

Output:

Event bubbling and capturing

Another example at JSFiddle.

 

I hope you will enjoy the Event bubbling and capturing in Javascript. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *