delegação de eventos

Onde usar

Usada em listas grandes ou dinâmicas, no lugar de um ouvinte por item. Em code review, economiza memória e evita esquecer de registrar ouvinte nos itens novos.

Em código

const lista = document.querySelector('ul');
lista.addEventListener('click', (ev) => {
  const li = ev.target.closest('li');
  if (!li || !lista.contains(li)) return;
  console.log('item', li.textContent);
});

Exemplos

Em vez de um ouvinte por linha, usei delegação de eventos na tabela.

Com delegação de eventos, as linhas novas já respondem ao clique.

Cuidado

Esquecer que o alvo pode ser um filho interno do item, quando é preciso usar event.target.closest para achar o elemento certo.

Sinônimos

event delegation