What is event delegation and when should I use it for dynamic lists?
Asked on Oct 06, 2025
Answer
Event delegation is a technique in JavaScript where a single event listener is added to a parent element to manage events for multiple child elements. This is especially useful for dynamic lists where elements are added or removed frequently.
<!-- BEGIN COPY / PASTE -->
document.getElementById('parentList').addEventListener('click', function(event) {
if (event.target && event.target.nodeName === 'LI') {
console.log('List item', event.target.textContent, 'was clicked!');
}
});
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with JavaScript best practices.- In this example, an event listener is attached to the "parentList" element.
- The listener checks if the event target is an "LI" element.
- This approach is efficient for handling events on dynamically added list items.
- Event delegation reduces memory usage and improves performance by minimizing the number of event listeners.
Recommended Links:
← Back to All Questions