Bubbling and Capturing in JavaScript

Event bubbling and capturing are two ways of event propagation in the HTML DOM API.

What is DOM ?

DOM - Document Object Model 

It's the way how JavaScript sees it's data on document. You can say it's a programming interface for HTML/XHTML/XML document. 

What is DOM event ? 

Event is the action that occur as a result of user action. 

here is some example of that. 

Focus Events : 

- focus 

- blur

- focusin

- focusout

Form Events : 

- submit 

- reset

Keyboard Events : 

- keydown

- keypress

- keyup

Mouse Events : 

- click 

- dblClick

- mouseover

- mousemove 

All standard events of DOM have 3 phase of propagation. 

1. Capturing phase (Event goes down to the element)

2. Target phase (Event reach at targeted element)

3. Bubbling phase (Event bubbles up from targeted element)

Here’s the picture of a click on <td> inside a table, taken from the specification:

Here : for a click on <td> the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target element and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.

Run the following code in you browser. 

<div onclick="alert('You have clicked on p!')"> <p>If you click on P, the handler on DIV runs.</p> </div>

you may notice that handler on div runs. 

Isn't is a bit strange ? Why the event on div run, though you have actually clicked on p. 

The reason is bubbling.  

Bubbling : 

Bubbling is simple. 

Event propagates from innermost element to the outermost. 

Example, 

we've 3 nested element. Form >div >p. Let's say we've handler on each of them. Try to run following code in browser. 

<form onclick="alert('You have clicked on form')">FORM <div onclick="alert('You have clicked on div')">DIV <p onclick="alert('You have clicked on p')">P</p> </div> </form>

When you click on P, you got the results in following results in sequence.

1. alert('You have clicked on p')

2. alert('You have clicked on div)

3. alert('You have clicked on form)

Thus, a event runs from an inner div and then propagates towards outermost div/parent div and so on upwards till the document object. 

This process is called bubbling because event "bubble" from innermost element up through parent element like bubble in water. 

Almost all events bubble. 

Thing to be noticed here is the word 'Almost'. 

There are events in JavaScript which don't bubble. 

Example : FocusEvent. 

Capturing : 

There is another mode of event propagation in JavaScript. That is capturing. Unlike bubbling, event propagates from outermost element to innermost element. It's opposite of bubbling. 

It is rarely used in real time. But sometimes it is very useful. 

By default, almost all modern browsers promote event bubbling. 

Back in history. Netscape accepted event capturing while Microsoft carried event bubbling. This caused lot of trouble to developers so finally W3C specified both approach can be used at free will. 

Event handlers don't know anything about capturing phase. They only rely on 2nd and 3rd phases. If you want to catch event on capturing phase, you need to specify in code like this. 

elem.addEventListener(..., {capture: true}) // or, just "true" is an alias to {capture: true} elem.addEventListener(..., true)

set capture option to true. By default, it is false. 

As we discussed, capturing phase is used rarely in real world. And there's logic behind this:)

When any accident happens, local authorities reacts first. Because they know best about that area. And then higher level authorities if there is need. 

Similarly, in event handling, the particular element with handler knows everything about it. So it should get first chance. Then immediate ancestor knows about context, a bit less and so on. 

Bubbling and capturing forms the foundation for "event delegation" - extremely powerful pattern for event handling. 

This was an overview of capturing and bubbling in JS. We'll discuss more about it in future.