Tuesday, September 16, 2014

JS Event Bubbling Vs Event Capturing.

In Javascript or HTML DOM to be precise, there are two methods of event propagation, those are:

  1. Event Capturing.
  2. Event Bubbling.
This defines the way event flow in case of multiple event listeners.
Suppose you have a img  element inside a div element then and both have an event listener defined, then whose event listener should be called first?

  1. In case of event bubbling, the inner most elements event listener will be called first and it would be propagated out. So first the event listener of img will be called followed by the event listener of div element.
  2. In case of event capturing, the outer most elements event listener is called first followed by inner elements. So, in above example,
    div's event listener would be called first followed by inner most element that is img's event listener.
The event propagation method can be selected by passing third optional boolean argument to addEventListener method of JS. The syntax is:
addEventListner(event,event_handler,usecapture)
The default value is false, hence, by default event bubbling is supported.

How to do this in JQuery?

You can't do this in Jquery. Jquery does not support this as not all browser support this method. And the goal of Jquery is cross-browser JS framework.
Browser older then IE8 and Opera 7.0 does not support event capturing method.