Event delegation

Event delegation places a single listener on a parent element rather than one per child, taking advantage of bubbling and event.target to know which child is concerned. It saves listeners and also works for elements added later.

Example

liste.addEventListener('click', (e) => {
  const li = e.target.closest('li')
  if (li) li.classList.toggle('fait')
})

Related concepts

The whole glossary