Event Delegation Interview Questions
Common interview questions about event delegation.
Event Delegation Interview Questions
Q1: What is event delegation?
Using event bubbling to handle events for multiple children with one listener on the parent.
Q2: Implement event delegation for a list.
ul.addEventListener("click", (e) => { if (e.target.tagName === "LI") console.log(e.target.textContent); });
Q3: What are the advantages?
Memory-efficient, works for dynamic elements, simpler code.
Q4: How do you handle clicks on nested elements?
Use e.target.closest('.item') to find the relevant parent.
Q5: What events do not bubble?
focus, blur, scroll (on elements), mouseenter, mouseleave. Use focusin/focusout for delegation.
The Takeaway
Interview questions: what is delegation (one parent listener using bubbling), implement for a list (check e.target.tagName), advantages (memory, dynamic, simple), nested elements (closest()), and non-bubbling events (use focusin/focusout).
Using event bubbling to handle events for multiple children with a single listener on the parent. The parent checks e.target to determine which child was clicked.
ul.addEventListener('click', e => { if (e.target.tagName === 'LI') console.log(e.target.textContent); }). One listener on the ul, check e.target for the clicked li.
Memory-efficient (one listener instead of many), works for dynamically added elements (no need to add new listeners), and simpler code (one handler instead of many).
Use e.target.closest('.item') to find the relevant ancestor. For example, if a button inside a list item is clicked, closest('li') finds the list item.
focus, blur, scroll (on elements), mouseenter, mouseleave. Use focusin/focusout (bubbling versions of focus/blur) and mouseover/mouseout (bubbling versions of mouseenter/mouseleave) for delegation.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.