Event propagation cycle in Javascript

Introduction
In JavaScript events placed a vital role while interaction with DOM, but life cycle of events are much complicated.

Phases in event life cycle
It is divided into two phases

1. Capturing Phase.

2. Bubbling Phase.

Both of phases makes the event to propagate and make a complete life cycle.

Event Flow

When we click on any event on HTML, that event have to start it's travel from HTML tag toward body and traversing all the tag which comes in it's way, but story dosen't ends here. It also have to go back to the starting HTML tag in the opposite direction, this round trip of events across DOM is called as event life cycle.

Suppose click event is fired on any tag inside HTML then that event starts traversing from top to that tag and wherever it encountered with handler for that event it also got fired until it reaches the tag where event was invoked and traverse back toward the HTML tag , but point needs to be noted that either it will fire the capturing events or bubbling events.

This means either the events will be captured or bubbled, but not the both.

Visual Representation

How to get target element
The element from which the event invoked (event triggered) is called "target"

To get the target below JavaScript code is required.
In IE
    event.srcElement

In all w3c comliant browser.
      event.target

For cross browser use it like:
var target = event.srcElement|| event.target;


Capturing & Bubbling

All methods of event handling ignores capturing phase except "addEventListener"
elem.addEventListener( type, handler, phase ) 
type-> Type of event.
handler-> function to handle that event.
phase ->false-> event bubbling(Default Phase) 
phase ->true-> event capturing "IE<9 does not support capturing at all"

If you want to stop event propagation at any point use:
event.cancelBubble=true (For IE) 
event.stopPropagation() (Other browsers)

Below is an example of event capturing, we are passing phase as true for capturing event.("Change phase to false and run the code")

Summary

1.Event propagation consist of event capturing and bubbling.
2.Event capturing is propagation of event from document to the triggered element.
3.Event bubbling is propagation of event from triggered element to upward towards document.
4.Either capturing or bubbling of an event is possible at a time.
5. IE<9 do not support event capturing at all.
6.To cancel any event event.cancelBubble=true (For IE) 
  event.stopPropagation() (Other browsers)