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:
[code]
<div id="outerElement">
<div id="innerElement">
</div>
</div>
[/code]
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”. 🙂