Event delegation is a programming pattern in JavaScript where a single event listener is attached to a parent element instead of multiple event listeners on individual child elements. This works because of event bubbling, where events triggered on child elements propagate (or "bubble up") to their ancestors.

Why use event delegation?

• Performance: Fewer event listeners mean less memory usage and better performance.
• Dynamic content: It handles events on elements that are added to the DOM after the event listener is attached.

Example

Suppose you have a list of items and want to respond to clicks on any item:

HTML:

Without delegation (inefficient for large/dynamic lists):

With event delegation (better):

document.getElementById('myList').addEventListener('click', function(event) {
     if (event.target.tagName === 'LI') {
        console.log('Item clicked:', event.target.textContent);
     }
});

In this delegated version, a single listener on the <ul> handles clicks for all <li> elements—even ones added later.

Key Points:

• Relies on event bubbling.
• Use event.target to find which child was actually clicked.
• Often used for lists, tables, or any UI elements where children are dynamic.