Aula 51 — Delegação de Eventos

Na aula anterior, aprendemos a criar elementos dinamicamente usando JavaScript.

Agora surge uma pergunta muito importante:

Como lidar com eventos (cliques, por exemplo) em elementos que não existiam no HTML inicial?

A resposta para isso é um conceito poderoso chamado Delegação de Eventos.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o problema dos eventos em elementos dinâmicos
• Aprender o conceito de delegação de eventos
• Usar corretamente o objeto event
• Capturar eventos de múltiplos elementos com um único listener
• Escrever código mais performático e organizado

O problema clássico

Imagine uma lista criada dinamicamente:

 
  const ul = document.createElement("ul"); 
  document.body.appendChild(ul);
  const li = document.createElement("li");
  li.textContent = "Item 1";
  ul.appendChild(li);

Agora queremos capturar o clique nesse <li>.

Se adicionarmos o evento diretamente:

 li.addEventListener("click", () => { console.log("Item clicado"); }); 

Funciona… mas não escala bem.

Por que isso vira um problema?

Imagine uma lista com:

• 10 itens
• 100 itens
• 1000 itens

Adicionar um addEventListener para cada item:

• Dá mais trabalho
• Consome mais memória
• Complica a manutenção

Como os eventos funcionam no DOM?

Quando um evento acontece em um elemento, ele sobe na árvore do DOM.

Esse comportamento é chamado de propagação de eventos (event bubbling).

Ou seja:

• O clique acontece no elemento
• Depois sobe para o pai
• Depois para o avô
• E assim por diante

A ideia da delegação de eventos

Em vez de escutar o evento em cada elemento filho, escutamos o evento no elemento pai.

Depois, verificamos quem realmente disparou o evento.

Isso é delegação de eventos.

Exemplo prático: delegando o clique

Vamos refazer o exemplo da lista usando delegação:

 
  const ul = document.createElement("ul"); 
  document.body.appendChild(ul);
  ["Item 1", "Item 2", "Item 3"].forEach(texto => {
    const li = document.createElement("li");
    li.textContent = texto;
    ul.appendChild(li);
  });
  ul.addEventListener("click", (event) => {
    console.log(event.target.textContent);
  });

 console.log(event.target.textContent); // Saída será o texto do item clicado 

Repare: apenas um listener controla todos os itens.

Entendendo o event.target

O event.target indica qual elemento foi clicado.

Já o event.currentTarget indica onde o evento está sendo escutado.

 
  ul.addEventListener("click", (event) => 
  { 
    console.log("Target:", event.target.tagName); 
    console.log("Current:", event.currentTarget.tagName); 
  }); 

 
    console.log("Target:", event.target.tagName); // Saída será "LI"
    console.log("Current:", event.currentTarget.tagName); // Saída será "UL"

Filtrando o elemento correto

Às vezes, o pai tem vários tipos de filhos. Podemos filtrar:

 
  ul.addEventListener("click", (event) => 
  { 
    if (event.target.tagName === "LI") 
      { 
        console.log("Clique em:", event.target.textContent); 
      } 
  }); 

Por que delegação é tão importante?

• Funciona com elementos dinâmicos
• Reduz quantidade de eventos
• Melhora performance
• Facilita manutenção

Na próxima aula, vamos falar sobre performance no DOM — como escrever código que não deixa a página lenta.