What is event delegation?

Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements.

The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM.

The benefits of event delegation

• Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
• There is no need to unbind the handler from elements that are removed and to bind the event for new elements.

3 phases of event propagation

The standard DOM Events describes 3 phases of event propagation:

1. Capturing phase – the event goes down to the element.
2. Target phase – the event reached the target element.
3. Bubbling phase – the event bubbles up from the element.

Bubbling

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

Capturing

When an event happens on an element, it first runs the handlers on it, then on its children, then all the way down on other descendant.

How to stop them?