The answer
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.
Event Delegation Interview Questions
How do you implement event delegation for a list?
More FAQs in Event Delegation Interview Questions
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.
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.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.