What is Event Bubbling ?

Event bubbling can be defined as a phase of Event propagation in which if an event occurs on a particular element will propagate or bubble up to the ancestor or the parent elements in the DOM hierarchy. By default, all the events bubble up to their ancestors.

For example, suppose you are given three different elements A(Grand parent), B(Parent), and C(Child). There are three different event listeners attached to each one of them. In that case, if you click the innermost element C, the event will propagate up in the DOM hierarchy and execute the callback function code of its event listener as well as the callback attached with ancestor elements such that the callbacks of elements A and B will also be executed.