Event Delegation

Attach one listener to a parent instead of many listeners on children. Works for dynamic elements too.

Use event.target.closest(".selector") to match child.

Example

// ❌ One listener per item
list.querySelectorAll('.item').forEach(i=>i.addEventListener('click',fn));

// ✅ One listener on parent
list.addEventListener('click', e=>{
  const item=e.target.closest('.item');
  if(!item) return;
  item.classList.toggle('done');
});

JAVASCRIPT

Full Editor

Related Resources

JavaScript Reference

Complete tag & property list

JavaScript How-To Guides

Step-by-step practical guides

JavaScript Exercises

Practice what you've learned