Event bubbling

Consider the DOM structure where there are 3 elements nested in the following order: Element 1 (Div), Element 2 (Span), Element 3 (Button) whose on-click handlers are handler1(), handler2() and handler3() respectively.

How the event bubbling works in DOM structure

<div id="Element1" onclick="handler1()"> 
  <span id="Element2" onclick="handler2()">  
    <input type="button" id="Element3" onclick="handler3()"/>  
  </span>  
</div>  

When the Element3 button is clicked, an event handler for Element 3 is triggered first, then event bubbles up and the handler for immediate parent element - Element 2 is called, followed by the handler for Element 1 and so on till it reaches the outermost DOM element.

Event handling order: handler3() - > handler2() -> handler1()

The innermost element from where the event is triggered is called the target element.[3] Most of the browsers consider event bubbling as the default way of event propagation. However, there is another approach for event propagation known as Event Capturing,[4] which is the direct opposite of event bubbling, where event handling starts from the outermost element (or Document) of the DOM structure and goes all the way to the target element, executing the target element handler last in order.

All the event handlers consider event bubbling as the default way of event handling. But a user can manually select the way of propagation by specifying that as the last parameter in addEventListener() [5] of any element in JavaScript.

addEventListener("type", "Listener", "CaptureMode")

If the CaptureMode is False, the event will be handled using event bubbling.

If the CaptureMode is True, the event will be handled using event capturing.

If a user doesn’t specify any value of CaptureMode argument, then it is by default considered as event bubbling. Most of the browser support both event bubbling and event capturing (Except IE <9 and Opera<7.0 which do not support event capturing).[1]

JavaScript also provides an event property called bubbles to check whether the event is bubbling event or not. It returns a Boolean value True or False depending on whether the event can bubble up to the parent elements in DOM structure or not.

var isBubblePossible = event.bubbles;

isBubblePossible : True, if event can bubble up to the ancestors

isBubblePossible : False, if event cannot bubble up[6]

To handle cases where one event has more than one handler, event bubbling concept can be implemented. The major use of event bubbling is the registration of default functions present in the program. In recent times, not many developers use event capturing or bubbling in particular. It is not necessary to implement event bubbling; it may become complicated for the users to keep track of the actions getting executed because of an event.[1]

Since all the browsers by default support event bubbling, it is sometimes useful to stop the event bubbling as a user might get confused when a single trigger on one element lead to multiple triggers on ancestors. So for the simple individual requirement where a user wants one event on one element, another on another, the bubbling of an event is not a necessity. To stop the event from bubbling up, user can use any of the following approaches:

1) stopPropagation(): This method stops the further propagation of any particular event to its parents, invoking only the event handler of the target element. Although supported by all W3C compliant browsers, this method doesn’t work with Internet Explorer version 9 or lesser.[7]

For IE<9, we can stop the bubbling using following code:

event.cancelBubble = true;

For all the W3C compliant browsers:

event.stopPropagation();

2) stopImmediatePropagation(): This method will not only stop the further propagation but also stops any other handler of the target event from executing. In DOM, we can have multiple handlers for the same event and they are independent of each other. So stopping the execution of one event handler generally doesn’t affect the other handlers of the same target. But stopImmediatePropagation() method prevents the execution of any other handler of the same target.[7]

For all the W3C compliant browsers:

event.stopImmediatePropagation();

Another approach to stop event bubbling is cancelling the event (preventDefault() or return false). But it prevents the target handler execution as well and therefore not advisable to use if the aim is to prevent just the event bubbling and user still wants some actions associated with the target element.[7]

• DOM events