JavaScript Academy · Lezione

Pattern della delega degli eventi

Gestisca molti eventi dei figli con un solo listener sul genitore.

Pattern della delega degli eventi è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 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.

Un solo listener per tutti

La delega degli eventi consiste nell'associare un singolo listener a un antenato comune invece di associare molti listener ai singoli elementi figli. Poiché gli eventi fanno bubbling, l'elemento genitore riceve i clic provenienti da tutti i suoi discendenti.

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

L'approccio ingenuo

Senza la delega, dovrebbe scorrere ogni elemento e associargli un gestore. È uno spreco: richiede più memoria e non funziona per gli elementi aggiunti in seguito.

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

L'approccio con delega

Invece, associ un solo listener all'elemento genitore ed esamini event.target per determinare quale elemento figlio è stato cliccato.

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

Trovare il target corretto

Il clic potrebbe finire su un elemento annidato. Usi event.target.closest(selector) per risalire l'albero e trovare l'antenato pertinente che corrisponde al selettore.

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

Proteggersi con un controllo

Verifichi sempre che il clic corrisponda all'elemento previsto. L'uscita anticipata if (!item) return; impedisce al gestore di andare in errore quando l'utente fa clic sul padding o su uno spazio vuoto all'interno del contenitore.

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

Usare gli attributi data

Uno schema comune consiste nel memorizzare un id o un'azione su ciascun elemento mediante un attributo data-*. Il gestore delegato lo legge dall'elemento corrispondente.

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);
});

Gestire in base all'azione

Per le barre degli strumenti con molti pulsanti, assegni a ciascuno un data-action e usi uno switch su questo valore. Un solo listener gestisce tutti i pulsanti.

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;
  }
});

Perché scala

Con la delega, un elenco di 1000 righe richiede un solo listener anziché 1000. Si riducono l'uso di memoria e il tempo di configurazione e non serve un ciclo di pulizia quando le righe cambiano.

Nota sulle prestazioni

La delega ha comunque un piccolo costo: ogni evento corrispondente esegue il gestore, che poi applica il filtro. Nella maggior parte delle app questo costo è trascurabile rispetto al risparmio ottenuto, ma eviti di associare listener delegati a document per eventi ad alta frequenza come mousemove.

Scegliere il contenitore

Scelga l'elemento antenato stabile più vicino che contiene tutti i target. Delegare a un contenitore ristretto, cioè alla lista stessa, è meglio che delegare a document, perché un numero inferiore di eventi non correlati attiva il gestore.

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

Combinare con closest

closest() è il fulcro della delega. Restituisce l'elemento stesso se corrisponde, oppure l'antenato corrispondente più vicino, oppure null. In questo modo è sicuro usare la delega con markup annidato.

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

Verifica rapida

Perché usare la delega degli eventi?

Riepilogo

La delega degli eventi associa un solo listener a un elemento genitore e usa il bubbling per gestire tutti gli elementi figli. Usi e.target.closest(selector) per trovare l'elemento pertinente, si protegga con un'uscita anticipata e legga gli attributi data-* per distribuire le azioni. Questo approccio scala a elenchi enormi ed è lo schema standard per le interfacce utente dinamiche.

Domande Frequenti

La lezione «Pattern della delega degli eventi» è gratuita?

Sì — il testo completo di «Pattern della delega degli eventi» è 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 «Pattern della delega degli eventi»?

Gestisca molti eventi dei figli con un solo listener sul genitore. 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 2 di 4.

Quanto tempo richiede la lezione «Pattern della delega degli eventi»?

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