JAVASCRIPT
Implement Event Delegation for Dynamic Element Interactions
Optimize performance by using event delegation to handle events on multiple child elements with a single event listener attached to their common parent, especially useful for dynamic content.
// Assume a parent element with ID 'list-container' that holds many child items
const listContainer = document.getElementById('list-container');
if (listContainer) {
listContainer.addEventListener('click', function(event) {
// Check if the clicked element (event.target) is a 'list-item' or inside one
// Using closest() is robust as it checks the element itself and its ancestors
const listItem = event.target.closest('.list-item');
if (listItem) {
console.log('Clicked on a list item:', listItem.textContent);
// Example: Toggle a class on the clicked item
listItem.classList.toggle('selected');
// You can also access data attributes
const itemId = listItem.dataset.id;
if (itemId) {
console.log('Item ID:', itemId);
}
}
});
// Example: How to add new items dynamically (which will also be covered by the delegate)
function addNewItem(text, id) {
const newItem = document.createElement('div');
newItem.textContent = text;
newItem.classList.add('list-item');
newItem.dataset.id = id;
listContainer.appendChild(newItem);
}
// Add a few items
addNewItem('Item One', '1');
addNewItem('Item Two', '2');
addNewItem('Item Three', '3');
}
How it works: Event delegation is a powerful technique where a single event listener is attached to a common parent element, rather than to each individual child. When an event (like a click) bubbles up from a child, the parent's listener catches it. `event.target.closest('.list-item')` is used to determine if the clicked element or any of its ancestors matches the specified selector. This approach is highly efficient for lists with many items, especially when items are added or removed dynamically, as you don't need to attach/detach listeners for each child.