JavaScript Academy · Lezione

Liste dinamiche con la delega

Gestisca gli eventi degli elementi aggiunti durante l'esecuzione.

Liste dinamiche con la delega è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Il problema degli elementi dinamici

Quando associa direttamente i listener agli elementi, qualsiasi elemento aggiunto al DOM dopo la configurazione non ha alcun listener. La delega risolve il problema perché il listener dell'elemento genitore intercetta gli eventi anche dei futuri elementi figli.

I listener diretti non funzionano

Qui viene aggiunto un listener agli elementi esistenti. Un elemento aggiunto in seguito non riceve nulla e rimane inattivo.

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

La delega funziona automaticamente

Con un listener delegato sull'elemento genitore, il nuovo elemento viene gestito automaticamente. Non è necessario associare nuovamente il listener dopo ogni inserimento.

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

Aggiungere elementi

Crei nuovi elementi e li aggiunga. Poiché l'elemento genitore usa già la delega, diventano interattivi nel momento stesso in cui appaiono.

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

Rimuovere elementi

L'eliminazione è altrettanto semplice. Un gestore delegato può rilevare un pulsante di eliminazione all'interno della riga e rimuovere la riga.

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

Distinguere le sottoazioni

Una riga può contenere diverse parti interattive. Usi matches() o closest() per determinare quale è stata cliccata, quindi scelga il ramo appropriato.

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

Eseguire il rendering dai dati

Uno schema comune consiste nel mantenere lo stato in un array, eseguire il rendering delle righe a partire da esso e delegare i clic. La riesecuzione del rendering sostituisce gli elementi figli, ma il singolo listener dell'elemento genitore rimane intatto.

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

Niente problemi di pulizia

Con i listener associati ai singoli elementi, deve ricordarsi di chiamare removeEventListener prima di eliminare i nodi, per evitare perdite di memoria. La delega elimina questo onere: l'eliminazione di un elemento figlio non lascia alcun listener orfano.

Attivare e disattivare le classi

La delega si abbina bene all'attivazione e disattivazione delle classi per gestire gli stati di selezione. Il gestore individua la riga e alterna una classe.

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

Leggere un'identità stabile

Poiché i nodi DOM vengono sostituiti durante il nuovo rendering, non memorizzi mai riferimenti a essi. Memorizzi un id stabile in data-id e cerchi il modello dei dati usando quell'id all'interno del gestore.

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

Anche gli eventi input

La delega non è limitata ai clic. È possibile delegare gli eventi input o change per i campi dei moduli aggiunti dinamicamente, usando lo stesso approccio.

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

Verifica rapida

Elenchi dinamici e delega.

Riepilogo

La delega è particolarmente efficace con gli elenchi dinamici: un solo listener dell'elemento genitore gestisce gli elementi figli presenti e futuri, sopravvive ai nuovi rendering e non richiede operazioni di pulizia per ogni nodo. Usi matches() e closest() per gestire le sottoazioni e memorizzi id stabili negli attributi data-*, così i gestori possono trovare il modello dei dati.

Domande Frequenti

La lezione «Liste dinamiche con la delega» è gratuita?

Sì — il testo completo di «Liste dinamiche con la delega» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Liste dinamiche con la delega»?

Gestisca gli eventi degli elementi aggiunti durante l'esecuzione. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Liste dinamiche con la delega»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy