Cool, gonna try one more.

1. So everytime a event occurs inside the HTML DOM API, the way it works is instead of telling that particular event that user has `clicked you`, it tells the root element that `the user has clicked this element`, root element passes this information to children which has that (the element which the user has clicked) element.

2. Once the information reaches the desired element, the desired element passes back the information, to its parent and it continues till the root element has received the event.

Now the first part that you're seeing is called Event Capturing (also called trickling) while the second part is called Event Bubble.

trickle down, bubble up

--- Additional Taken from stackover flow

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.