Event Delegation

Event delegataion is a technique where we add an event listener to a parent element instead of adding it to multiple child elements. The event is then fired on the child element when the event occurs.

This happens because the event triggered by the child element will bubble up due to event bubbling.

Benefits

• Useful for adding same event listeners and handlers to a group of child elements
• Memory footprint goes down as we only bind event listeners to parent elements
• No need to unbind listeners from elements that are removed

Event Capturing

When event is triggered, it will first enter the capturing phase, then reach the event target, and then the bubbling phase.

Capturing Phase

When event triggered, topmost window of the DOM tree goes all the way down to the the target element to be executed