There are two ways of event propagation in HTML DOM, when an event occur in an element with an element:
1. Event bubbling
2. Event capturing

1. Event bubbling : There are many times when we want to handle two or more event handlers at different levels in DOM and that is why event bubbling introduced.
So, it makes an event to propagate from child element to a parent element.

               / \
===============| |=================
| 1st element  | |                |
|   ===========| |===========     |
|   |2 element | |          |     |
|   =========================     |
|        Event BUBBLING           |
===================================

The event handler of 2nd element fires first, the event handler of 1st element fires last.

2. Event propagation : It is as same as event bubbling. Also it not only include event bubbling but also the event capturing.

3. Event capturing : Event capturing is the opposite of bubbling (events are handled at higher levels first, then sink down to individual elements at lower levels). Many browser does not support Event capturing like Internet Explorer version previous to 9.0.

               | |
===============| |=================
| 1st element  | |                |
|   ===========| |===========     |
|   |2 element \ /          |     |
|   =========================     |
|        Event CAPTURING          |
===================================

The event handler of 1st element fires first, the event handler of 2nd element fires last.

Hope this will make you understand more about Event capturing and Event bubbling.