Without delegation, you attach an event listener to each individual element — which causes memory and performance issues.

// ❌ Attaching listener to each item
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', () => {
    console.log('Item clicked:', item.textContent);
  });
});

1. Memory overhead — each listener uses memory
2. Performance — attaching many listeners is slow
3. Dynamic elements — new elements added later won’t have listeners
4. Maintenance — harder to remove or update handlers

flowchart LR
    subgraph "Without Delegation ❌"
        A["1000 list items"]
        B["1000 event listeners"]
    end

• Each listener consumes memory
• Doesn’t work for dynamically added elements
• Harder to maintain many individual listeners
• Event delegation solves all these problems

• MDN: Event Delegation