$cat~/glossario/event-delegation.md

Event Delegation

Web Platform

Padrão de ouvir evento no ancestral e filtrar pelo alvo real.

event-delegation.mdmarkdown
01

seção

Explicação

Event Delegation — Padrão de ouvir evento no ancestral e filtrar pelo alvo real.

Um listener no ancestral trata eventos de filhos via event.target — menos listeners, DOM dinâmico OK.

Padrão essencial listas renderizadas incrementalmente.

02

seção

Exemplo

snippetJavaScript
list.addEventListener("click", (e) => {  const btn = e.target.closest("[data-action]");  if (!btn) return;  handle(btn.dataset.action);});
03

seção

Modo de uso

  • Tabelas grandes

  • Todo lists dinâmicas

  • Performance many nodes

04

seção

Armadilhas comuns

  • target vs currentTarget confusão

  • Esquecer closest para nested elements

05

seção

Termos relacionados