Event Delegation


Event delegation is a technique where a parent element handles events for its child elements.

Instead of attaching events to multiple child elements, the event is attached to a common parent.

Event delegation works using event bubbling.

When an event occurs on a child element, it bubbles up to the parent.

This approach works only for elements that already exist.

It will not work for elements added dynamically later.

This method uses event delegation.

It works for both existing and dynamically added elements.

Even though the list item is added dynamically, the delegated event still works.

Event Delegation Notes:

  • Uses parent element
  • Based on event bubbling
  • Required for dynamic content
  • Common in AJAX applications