Event Delegation in JavaScript
From the DOM Manipulation cheat sheet · Events - Advanced · verified Jul 2026
Event Delegation
Handle events efficiently using event bubbling and delegation
javascript
// Delegate events to parent
document.addEventListener('click', (event) => {
if (event.target.matches('.button')) {
// Handle button click
}
})
// Closest for complex structures
list.addEventListener('click', (event) => {
const item = event.target.closest('.item')
if (item) {
// Handle item click
}
})💡 Delegation works for dynamically added elements
⚡ One listener is better than many
📌 Use closest() for complex component structures
✅ Check event.target existence in delegated handlers
Continue with DOM Manipulation
Save the full cheat sheet or work through every related task.