Event Delegation

Lesson content

🎯 Goal By the end of this lesson, you'll understand: What is Event Delegation? Why do we need it? How Event Bubbling works How Event Delegation works Benefits of Event Delegation Real-world examples Interview questions What is Event Delegation? Event Delegation is a technique where you attach one event listener to a parent element instead of attaching event listeners to every child element. The parent listens for events that bubble up from its children. Simple Definition: Event Delegation means handling events for child elements using a single event listener on their parent. Why Do We Need Event Delegation? Without Event Delegation: Many event listeners are created. More memory is used. Code becomes difficult to maintain. With Event Delegation: Only one event listener is needed. Better performance. Easier to manage dynamic elements. Real-Life Example 🏫 Imagine a classroom. Teacher │ Students Instead of giving instructions to every student individually, the teacher announces once to the whole class. The teacher is the parent element . The students are the child elements . Without Event Delegation <ul> <li> Apple </li> <li> Banana </li> <li> Mango </li> </ul> JavaScript const items = document . querySelectorAll( "li" ); items . forEach( item => { item . addEventListener( "click" , () => { console . log( item . textContent); } ); }); Three list items require three event listeners. With Event Delegation HTML <ul id = "fruits" > <li> Apple </li> <li> Banana </li> <li> Mango </li> </ul> JavaScript const list = document . getElementById( "fruits" ); list . addEventListener( "click" , ( event ) => { console . log( event . target . textContent ); } ); Only one event listener is attached. Event Bubbling Event Delegation works because of Event Bubbling . User Click │ ▼ <li> │ ▼ <ul> │ ▼ <body> │ ▼ document The click event moves upward through parent elements. Event Object The event object contains information about the event. list . addEventListener( "click" , ( event ) => { console . log( event . target); } ); Output <li>Apple</li> event.target event.target is the element that actually triggered the event. console . log( event . target); Output <li>Banana</li> event.currentTarget event.currentTarget is the element where the event listener is attached. console . log( event . currentTarget); Output <ul id="fruits"> target vs currentTarget Property Meaning event.target Element that triggered the event event.currentTarget Element with the event listener Filtering Elements Sometimes the parent contains different elements. list . addEventListener( "click" , ( event ) => { if ( event . target . tagName === "LI" ) { console . log( event . target . textContent ); } } ); Using closest() list . addEventListener( "click" , ( event ) => { const item = event . target . closest( "li" ); if ( ! item ) return ; console . log( item . textContent); } ); closest() finds the nearest matching parent or the element itself. Dynamic Elements Without delegation const button = document . createElement( "button" ); button . textContent = "New" ; The new button has no event listener unless one is added manually. With delegation container . addEventListener( "click" , ( event ) => { if ( event . target . matches( "button" ) ) { console . log( "Clicked" ); } } ); Even newly created buttons work automatically. Complete Flow User Click │ ▼ Child Element │ ▼ Event Bubbles Up │ ▼ Parent Listener │ ▼ Check event.target │ ▼ Run Action Real-Life Example 🛒 Shopping Website Product List │ ▼ User Clicks Product │ ▼ Parent Receives Click │ ▼ Product Added to Cart Only one listener is needed for the product list. Common Use Cases Application Event Delegation Todo List Handle item clicks Shopping Cart Product selection Data Tables Row selection Navigation Menu Menu clicks Chat App Message actions Benefits of Event Delegation ✅ Better Performance ✅ Less Memory Usage ✅ Cleaner Code ✅ Works with Dynamic Elements ✅ Easier Maintenance Event Delegation Flow Parent │ ├── Child 1 ├── Child 2 ├── Child 3 └── Child 4 │ ▼ Click │ ▼ Parent Listener Handles Event Interview Question What is Event Delegation? Answer Event Delegation is a technique where a parent element handles events for its child elements using a single event listener. Why is Event Delegation useful? Answer It improves performance, reduces memory usage, simplifies code, and automatically supports dynamically added elements. What is Event Bubbling? Answer Event Bubbling is the process where an event starts at the target element and propagates upward through its parent elements. What is event.target ? Answer It refers to the element that originally triggered the event. What is event.currentTarget ? Answer It refers to the element on which the event listener is attached. Best Practices ✅ Attach the event listener to the closest common parent. ✅ Use event.target or closest() to identify the clicked element. ✅ Filter unwanted clicks with matches() or closest() . ✅ Use Event Delegation for lists, tables, menus, and dynamic content. ❌ Don't attach hundreds of individual event listeners when one parent listener is enough. ❌ Don't assume event.target is always the exact element you want; use closest() when nested elements are possible. Key Points ✅ Event Delegation uses one parent event listener for many child elements. ✅ It relies on Event Bubbling. ✅ event.target identifies the clicked element. ✅ event.currentTarget identifies the element with the event listener. ✅ It improves performance and supports dynamically added elements. ✅ It is commonly used in lists, menus, tables, and dynamic interfaces. 🧠 Easy Formula Child Click │ ▼ Event Bubbling │ ▼ Parent Listener │ ▼ event.target │ ▼ Perform Action Event Delegation = One Parent Listener event.target = Clicked Element event.currentTarget = Listener Element closest() = Find Matching Parent matches() = Check Selector Remember: 👆 One parent listener can manage many child elements. 🔄 Event Delegation works because of Event Bubbling. 🎯 event.target tells you which element was clicked. 📍 event.currentTarget is where the listener is attached. 🚀 Event Delegation is ideal for dynamic lists, tables, menus, and other interactive UI components.