Event Bubbling

Event bubbling is a term used for the order in which events get triggered on nested HTML tags. e.g. consider following case where we have a <div> inside another <div> tag:



<div id="outerElement">
    <div id="innerElement">


Now, if both #outerElement and #innerElement have click event listeners set and we click on the nested <div>, which event listener will get called?

Both of them.

Both of them? In which order then?

Event bubbling says that the order will behave like a bubble of air in water which moves in bottom-up direction, i.e. first the #innerElement’s event listener will get called and then the #outerElements’s event listener will get triggered.

Opposite of Event Bubbling is referred to as Event Catching or Event Trickling – which is another type of event triggering. In Event Catching, triggering happens from top to bottom. In order to instantiate “Event Catching”, addEventListener’s optional argument: useCapture need to be set to true. (Default mode of operation is, however, Event Bubbling).

Key to remember is: “Bottom Up – Trickle Down”. 🙂


Subscribe: rss | email