Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors of the target element in the same nesting hierarchy till it reaches the outermost DOM element or document object. It is one way that events are handled in the browser. Events are actions done by the user such as a button click, changing a field etc. Event Handlers are used to execute code when a particular kind of user interface event occurs, such as when a button has been clicked or when a webpage has completed loading.
Overview
Consider the DOM structure where there are 3 elements nested in the following order: Element 1, Element 2, Element 3 whose on-click handlers are handler1, handler2 and handler3 respectively.
When the Element3 button is clicked, an event handler for Element 3 is triggered first, then event bubbles up and the handler for immediateparent 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. Most of the browsers consider event bubbling as the default way of event propagation. However, there is another approach for event propagation known as , which is the direct opposite of event bubbling, where event handling starts from the outermost element of the DOM structure and goes all the way to the target element, executing the target element handler last in order.
Implementation
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 of any element in JavaScript.
addEventListener
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. JavaScript also provides an event property called bubbles to check whether the event is bubbling event or not. It returns a Boolean valueTrue 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
Use of Event Bubbling
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.
How to stop bubbling
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. 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. For all the W3C compliant browsers:
event.stopImmediatePropagation;
Another approach to stop event bubbling is . 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.
