jQuery Academy · Lezione

Implementazione della delega degli eventi

Imparare i principi e i vantaggi della delega degli eventi usando .on() per gestire gli eventi di più elementi, anche futuri, con un solo listener e migliorare le prestazioni.

Lezione 1 di 311 passaggi

Implementazione della delega degli eventi è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. 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 jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.

Che cos'è la delega degli eventi?

Benvenuto nella delega degli eventi! Questa potente tecnica aiuta a gestire gli eventi in modo efficiente nelle applicazioni web.

Invece di associare molti listener di eventi ai singoli elementi, si associa un unico listener a un elemento genitore comune. È come avere un "supervisore" che controlla tutti i suoi "figli" per individuare azioni specifiche.

Associazione diretta: un limite

Quando si associano direttamente gli eventi agli elementi usando .on() o altri metodi, il listener viene associato solo agli elementi esistenti in quel preciso momento. Gli eventuali nuovi elementi aggiunti in seguito al DOM non ricevono automaticamente il gestore dell'evento.

Nell'esempio, provi a fare clic sui pulsanti iniziali. Dopo un breve ritardo apparirà un nuovo pulsante. Provi a fare clic sul nuovo pulsante: non risponderà!

$(document).ready(function() {
  // Assume basic HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Direct binding to existing items
  $('.item').on('click', function() {
    $(this).text('Directly clicked!');
  });

  // Simulate adding a new item after initial binding
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it wont respond!');
  }, 2000);
});

Capire il bubbling degli eventi

Per comprendere la delega, è necessario conoscere il bubbling degli eventi. Quando si verifica un evento (come un clic) su un elemento, questo viene prima attivato su tale elemento, poi sul suo genitore, quindi sul genitore del genitore e così via, fino ad arrivare a document.

La proprietà event.target fa sempre riferimento all'elemento originale che ha attivato l'evento, indipendentemente dal genitore che lo intercetta. Provi a fare clic sugli elementi qui sotto e osservi l'output nella console.

$(document).ready(function() {
  // Assume HTML like:
  // <div id="outer">
  //   <div id="middle">
  //     <button id="inner">Click Me</button>
  //   </div>
  // </div>

  $('#outer').on('click', function(event) {
    console.log('Outer div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#middle').on('click', function(event) {
    console.log('Middle div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#inner').on('click', function(event) {
    console.log('Inner button caught event. Target:', event.target.id || event.target.tagName);
  });
});

.on() di jQuery per la delega

Il metodo .on() di jQuery può essere usato per la delega degli eventi fornendo un argomento aggiuntivo selector. La sintassi è la seguente:

$(parentSelector).on(event, childSelector, handler);

In questo caso, il listener dell'evento viene associato a parentSelector. Tuttavia, la funzione handler viene eseguita solo se l'evento ha avuto origine da un elemento discendente che corrisponde a childSelector.

Esempio di delega degli eventi

Ora applichiamo la delega degli eventi per risolvere il problema della Scena 2. Associeremo il listener al contenitore genitore (#my-list), indicandogli però di reagire solo se il clic proviene da un elemento che corrisponde a .item.

Noti che ora, quando compare il nuovo pulsante, risponderà ai clic!

$(document).ready(function() {
  // Assume HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Event delegation: listener on the parent (#my-list)
  // It listens for clicks on any descendant matching '.item'
  $('#my-list').on('click', '.item', function() {
    $(this).text('Delegated click!');
  });

  // Simulate adding a new item after delegation setup
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Delegated Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it WILL respond!');
  }, 2000);
});

Gestire gli elementi dinamici

Il vantaggio principale mostrato nell'esempio precedente è la capacità della delega degli eventi di gestire con facilità gli elementi aggiunti dinamicamente.

Poiché il listener si trova sul genitore statico, tutti i nuovi elementi figli che corrispondono a childSelector vengono automaticamente gestiti da quel singolo listener. Non è necessario associare nuovamente gli eventi ogni volta che si aggiunge contenuto!

Aumento delle prestazioni

Oltre a gestire i contenuti dinamici, la delega degli eventi offre notevoli vantaggi in termini di prestazioni:

Meno listener: invece di associare un listener separato a centinaia di elementi, se ne associa uno solo al genitore comune.
Minore utilizzo di memoria: un numero inferiore di listener significa meno memoria occupata dall'applicazione.
Avvio più rapido: il browser impiega meno tempo per configurare i gestori degli eventi al caricamento della pagina.

Quando delegare gli eventi

La delega degli eventi è uno strumento potente, ma non è sempre necessaria. Ecco gli scenari ideali in cui usarla:

Quando si gestisce un numero elevato di elementi simili (ad esempio, gli elementi di un lungo elenco o le righe di una tabella).
Quando gli elementi vengono aggiunti o rimossi dinamicamente dal DOM dopo il caricamento iniziale della pagina.
Quando le prestazioni sono una priorità nella gestione degli eventi.

Buone pratiche per la delega

Per ottenere il massimo dalla delega degli eventi, segua queste buone pratiche:

Scelga il genitore statico più vicino: deleghi al più vicino antenato che sicuramente esiste al caricamento della pagina. Eviti di delegare a document o body se è disponibile un genitore più vicino.
Comprenda $(this): all'interno di un gestore delegato, $(this) fa riferimento all'elemento originale che corrispondeva a childSelector, non all'elemento genitore a cui è associato il listener.
Presti attenzione al bubbling: sebbene sia utile per la delega, il bubbling può talvolta causare effetti collaterali indesiderati se non viene gestito (ad esempio con event.stopPropagation(), illustrato in un'altra lezione).

Metta alla prova le Sue conoscenze

Quali dei seguenti scenari sono ideali per utilizzare la delega degli eventi?

Rispondi nella lezione interattiva

Riepilogo della delega degli eventi

Ottimo lavoro! Ha appreso i principi fondamentali della delega degli eventi in jQuery.

Abbiamo visto come .on() con un childSelector consenta a un unico listener sul genitore di gestire gli eventi per più elementi figli, inclusi quelli aggiunti dinamicamente. Questa tecnica è fondamentale per migliorare le prestazioni, semplificare il codice e gestire in modo efficiente i contenuti dinamici nelle applicazioni jQuery.

Padroneggiare la delega renderà la gestione degli eventi solida e scalabile!

Gratis per iniziare

Impara JavaScript con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 22
Lezioni: 48

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

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

Sì — il testo completo di «Implementazione 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 jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.

Cosa imparerò in «Implementazione della delega degli eventi»?

Imparare i principi e i vantaggi della delega degli eventi usando .on() per gestire gli eventi di più elementi, anche futuri, con un solo listener e migliorare le prestazioni. Eserciti jQuery 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 jQuery Academy?

Non è richiesta alcuna esperienza precedente. jQuery 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 1 di 3.

Quanto tempo richiede la lezione «Implementazione 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 jQuery Academy?

Sì. Ogni lezione jQuery 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

Implementazione della delega degli eventi
Interruzione della propagazione degli eventi
Creazione e attivazione di eventi personalizzati

← Torna a jQuery Academy