What is event delegation?

Event delegation is a technique in JavaScript that leverages event bubbling to handle events more efficiently. Instead of attaching separate event listeners to multiple child elements, you attach a single event listener to a common parent element. When an event occurs on one of the child elements, it bubbles up to the parent, where the event listener can detect it and respond accordingly. Here’s how event delegation works: When an event (like a click) happens on a child element, the event propagates up through the DOM tree to its ancestors. By placing a listener on a parent element, you can catch events from any of its descendants. Inside the event handler, you typically use the event object’s `target` property to determine which child element triggered the event, and then execute the appropriate logic based on that. This approach has several benefits: - **Performance:** Reduces the number of event listeners attached, which can save memory and improve performance, especially for large lists or dynamic content. - **Dynamic Elements:** Works well with elements added dynamically to the DOM after the event listeners are set up, since the listener on the parent will still catch events from new children. - **Simpler Code:** Centralizes event handling logic in one place, making the code easier to maintain. Here’s a simple example: ```javascript const list = document.getElementById('myList'); list.addEventListener('click', function(event) { if (event.target && event.target.nodeName === 'LI') { console.log('Clicked list item:', event.target.textContent); } }); ``` In this example, a single click listener is attached to the `` or `` element with the ID `myList`. When any `` inside that list is clicked, the event bubbles up to the list, and the handler checks if the actual clicked element (`event.target`) is an ``. If so, it handles the event accordingly. This eliminates the need to add listeners to every individual list item.