JavaScript Academy · Aula

Listas dinâmicas com delegação

Gerencie eventos de elementos adicionados em tempo de execução.

Listas dinâmicas com delegação é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 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.

O Problema dos Elementos Dinâmicos

Quando você associa ouvintes diretamente aos elementos, qualquer elemento adicionado ao DOM depois da configuração fica sem ouvinte. A delegação resolve isso porque o ouvinte do elemento pai também captura eventos de elementos filhos adicionados no futuro.

Os Ouvintes Diretos Falham

Aqui, um ouvinte é associado aos itens existentes. Um item recém-adicionado não recebe nada e permanece inativo.

document.querySelectorAll(".item").forEach((el) =>
  el.addEventListener("click", handle)
);
list.appendChild(newItem); // newItem has NO handler

A Delegação Simplesmente Funciona

Com um ouvinte delegado no elemento pai, o novo item é gerenciado automaticamente. Não é necessário reassociar ouvintes após cada inserção.

list.addEventListener("click", (e) => {
  const item = e.target.closest(".item");
  if (item) console.log("Clicked", item.dataset.id);
});
list.appendChild(newItem); // works immediately

Adicionando Itens

Crie novos elementos e anexe-os. Como o elemento pai já usa delegação, eles se tornam interativos assim que aparecem.

function addItem(text) {
  const li = document.createElement("li");
  li.className = "item";
  li.textContent = text;
  list.appendChild(li);
}

Removendo Itens

A exclusão também é simples. Um manipulador delegado pode detectar um botão de exclusão dentro da linha (row) e remover a linha.

list.addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    e.target.closest(".item").remove();
  }
});

Distinguindo Subações

Uma linha pode ter várias partes interativas. Use matches() ou closest() para identificar qual delas foi clicada e, em seguida, tome a ação correspondente.

list.addEventListener("click", (e) => {
  if (e.target.matches(".edit-btn")) edit(e);
  else if (e.target.matches(".delete-btn")) del(e);
});

Renderizando a Partir de Dados

Um padrão comum é manter o estado em um array, renderizar as linhas a partir dele e delegar os cliques. A nova renderização substitui os elementos filhos, mas o único ouvinte do elemento pai permanece intacto.

function render(items) {
  list.innerHTML = items
    .map((i) => "<li class=\"item\" data-id=\"" + i.id + "\">" + i.name + "</li>")
    .join("");
}

Sem Problemas de Limpeza

Com ouvintes associados individualmente aos elementos, você precisa se lembrar de usar removeEventListener antes de excluir os nós para evitar vazamentos. A delegação elimina essa preocupação: excluir um elemento filho não deixa nenhum ouvinte órfão.

Alternando Classes

A delegação combina bem com a alternância de classes para representar estados de seleção. O manipulador encontra a linha e alterna uma classe.

list.addEventListener("click", (e) => {
  const row = e.target.closest(".item");
  if (row) row.classList.toggle("selected");
});

Lendo uma Identidade Estável

Como os nós do DOM são substituídos durante uma nova renderização, nunca armazene referências a eles. Armazene um identificador estável em data-id e procure seus dados pelo identificador dentro do manipulador.

const id = e.target.closest(".item").dataset.id;
const record = state.find((r) => r.id === id);

Eventos de Entrada Também

A delegação não se limita aos cliques. Você pode delegar eventos input ou change para campos de formulário adicionados dinamicamente da mesma maneira.

form.addEventListener("input", (e) => {
  if (e.target.matches(".qty")) recalc(e.target);
});

Verificação Rápida

Listas dinâmicas e delegação.

Recapitulação

A delegação é especialmente útil com listas dinâmicas: um único ouvinte no elemento pai gerencia os elementos filhos atuais e futuros, sobrevive a novas renderizações e não exige limpeza individual por nó. Use matches() e closest() para diferenciar subações e armazene identificadores estáveis em data-* para que os manipuladores encontrem seu modelo de dados.

Perguntas Frequentes

A aula “Listas dinâmicas com delegação” é grátis?

Sim — o texto completo de “Listas dinâmicas com delegação” é 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 “Listas dinâmicas com delegação”?

Gerencie eventos de elementos adicionados em tempo de execução. 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 3 de 4.

Quanto tempo leva a aula “Listas dinâmicas com delegação”?

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