Event Flow in JavaScript – Capturing and Bubbling

The order in which the events fire is called Event Flow.  HTML elements are nested inside other elements. So If we are hovering or clicking on an element that also hovering or clicking on other elements as well.

Event Bubbling

Event bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements. In the below example image that the list contains the list and if you click on the link JavaScript can trigger an event on the link first and as well as the other elements the anchor tag sits inside.

Event Capturing

With capturing, the event is first captured by the outermost element and propagated to the inner elements.

Browser Support

Event Bubbling has wider browser support and will support almost IE versions and all modern browsers.  But the Event Capturing doesn’t support IE8 and earlier versions.

Reference book: Javascript and Jquery by John Dukett