The answer
table.addEventListener('click', e => { const row = e.target.closest('tr'); if (e.target.matches('.sort-btn')) sortTable(e.target.dataset.column); if (e.target.matches('.edit-btn')) editRow(row.dataset.id); }).
Event Delegation: Real-World Examples
How do you use event delegation for a data table in JavaScript?
More FAQs in Event Delegation: Real-World Examples
todoList.addEventListener('click', e => { if (e.target.matches('.delete-btn')) e.target.closest('li').remove(); if (e.target.matches('.toggle-btn')) e.target.closest('li').classList.toggle('done'); }). One listener handles delete and toggle for all items.
cart.addEventListener('click', e => { if (e.target.matches('.increase')) updateQty(e.target.dataset.id, 1); if (e.target.matches('.decrease')) updateQty(e.target.dataset.id, -1); if (e.target.matches('.remove')) removeItem(e.target.dataset.id); }).
tabs.addEventListener('click', e => { if (e.target.matches('.tab')) switchTab(e.target.dataset.tab); }). One listener on the tab container handles all tab clicks. Check e.target.matches('.tab') and use dataset.tab to identify which tab.
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.