JavaScript Academy · Aula

Padrão de delegação de eventos

Trate muitos eventos de elementos filhos com um único ouvinte no elemento pai.

Padrão de delegação de eventos é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Um Ouvinte para Todos os Casos

Delegação de eventos significa associar um único ouvinte a um ancestral comum, em vez de associar vários ouvintes aos elementos filhos individualmente. Como os eventos fazem borbulhamento, o elemento pai recebe os cliques de todos os seus descendentes.

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

A Abordagem Ingênua

Sem delegação, você teria de percorrer cada item e associar um manipulador. Isso desperdiça recursos: usa mais memória e não funciona para elementos adicionados posteriormente.

document.querySelectorAll("#menu li").forEach((li) => {
  li.addEventListener("click", () => console.log(li.textContent));
});

A Abordagem Delegada

Em vez disso, associe um único ouvinte ao elemento pai e inspecione event.target para descobrir qual elemento filho foi clicado.

const menu = document.getElementById("menu");
menu.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});

Encontrando o Alvo Correto

O clique pode ocorrer em um elemento aninhado. Use event.target.closest(selector) para subir pela árvore e encontrar o ancestral relevante que corresponde ao seu seletor.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return; // clicked outside any li
  console.log("Clicked:", item.textContent);
});

Protegendo com uma Verificação

Sempre verifique se os cliques correspondem ao que você espera. A saída antecipada if (!item) return; impede que seu manipulador falhe quando o usuário clica no preenchimento ou em um espaço dentro do contêiner.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item || !menu.contains(item)) return;
  handleSelect(item);
});

Usando Atributos de Dados

Um padrão comum armazena um identificador ou uma ação em cada item usando um atributo data-*. O manipulador delegado lê esse valor do elemento correspondente.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;
  const id = item.dataset.id;   // reads data-id
  console.log("Selected id:", id);
});

Despachando por Ação

Em barras de ferramentas com muitos botões, atribua um data-action a cada botão e selecione a ação com base nesse valor. Um único ouvinte gerencia todos os botões.

toolbar.addEventListener("click", (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;
  switch (btn.dataset.action) {
    case "save": save(); break;
    case "delete": remove(); break;
  }
});

Por Que Isso É Escalável

Com delegação, uma lista de 1000 linhas precisa de apenas um ouvinte, em vez de 1000. Isso usa menos memória, acelera a configuração e elimina a necessidade de um ciclo de limpeza quando as linhas mudam.

Observação sobre Desempenho

A delegação também tem um pequeno custo: seu manipulador é executado para todos os eventos correspondentes e depois faz a filtragem. Na maioria dos aplicativos, esse custo é insignificante diante da economia obtida, mas evite associar ouvintes delegados a document para eventos de frequência muito alta, como mousemove.

Escolhendo o Contêiner

Escolha o ancestral estável mais próximo que contenha todos os alvos. Delegar para um contêiner restrito (a própria lista) é melhor do que delegar para document, porque menos eventos não relacionados acionam seu manipulador.

const list = document.querySelector(".task-list");
list.addEventListener("click", onTaskClick);

Combinando com closest

closest() é o centro da delegação. Ele retorna o próprio elemento se houver correspondência, o ancestral correspondente mais próximo ou null. Isso torna seguro delegar sobre marcações aninhadas.

const cell = e.target.closest("td[data-col]");
if (cell) console.log(cell.dataset.col);

Verificação Rápida

Por que usar a delegação de eventos?

Recapitulação

A delegação de eventos associa um único ouvinte a um elemento pai e usa o borbulhamento para gerenciar todos os elementos filhos. Use e.target.closest(selector) para encontrar o elemento relevante, faça uma verificação com uma saída antecipada e leia os atributos data-* para despachar ações. Esse padrão é escalável para listas enormes e é a abordagem padrão para interfaces dinâmicas.

Perguntas Frequentes

A aula “Padrão de delegação de eventos” é grátis?

Sim — o texto completo de “Padrão de delegação de eventos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Padrão de delegação de eventos”?

Trate muitos eventos de elementos filhos com um único ouvinte no elemento pai. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Padrão de delegação de eventos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy