jQuery.on(): come collegare gestori di eventi

Il metodo jQuery.on() offre una sintassi semplificata e coerente per l’elaborazione degli eventi, risultando pertanto ampiamente diffuso nello sviluppo di applicazioni web interattive. Ti presentiamo la sintassi ed esempi pratici per illustrarne il funzionamento.

Cos’è il metodo jQuery.on()?

jQuery.on() può collegare i gestori di determinati eventi a elementi. È impiegato nello sviluppo web per reagire alle interazioni degli utenti e chiamare funzioni. Con jQuery.on() è possibile definire gestori di eventi come clic, inserimenti da tastiera, movimenti del mouse, dati inseriti nei moduli e molto altro. Permette inoltre l’event delegation: collegare gestori di eventi a elementi anche se questi vengono aggiunti o rimossi durante l’esecuzione. Il codice da eseguire per l’evento potrebbe ad esempio essere l’aggiunta di una classe con jQuery.addClass(). Ma è possibile anche la localizzazione di elementi con jQuery.find(). Puoi eseguire iterazioni con il ciclo jQuery.each() nel blocco funzione. I metodi di elaborazione degli eventi possono inoltre essere integrati comodamente con jQuery su WordPress.

Come si presentano la sintassi e i parametri del metodo jQuery.on()?

In concreto, la sintassi di jQuery.on() è:

$(selector).on(event, childSelector, data, function, map)

• event: il nome dell’evento a cui deve reagire il gestore, ad esempio “click”, “keydown”, “submit”, ecc.
• childSelector: opzionale, è un selettore CSS che indica quali elementi subordinati devono attivare l’evento.
• data: dati aggiuntivi opzionali che vengono passati al gestore di eventi.
• function: la funzione che viene eseguita quando viene attivato l’evento.
• map: permette di collegare più eventi e i relativi gestori in un’unica chiamata utilizzando una mappatura oggetto.

Trovi ulteriori informazioni sulle notazioni e le funzioni nel tutorial su jQuery della nostra guida.

Un esempio di applicazione di jQuery.on()

Con il metodo jQuery.on() puoi collegare eventi ed eseguire un determinato codice all’attivazione. Di seguito ti presentiamo l’elaborazione di un evento di clic:

$('#myButton').on('click', function() {
    console.log('Il pulsante è stato cliccato!');
});

In questo esempio il gestore dell’evento di clic viene collegato all’elemento del pulsante con l’ID “myButton”. Facendo clic sul pulsante si esegue la funzione del gestore dell’evento e nella console viene visualizzato il messaggio “Il pulsante è stato cliccato!”. Utilizzando jQuery.on() puoi anche gestire altri eventi come “mouseover”, “keydown” o “submit” e definire le relative funzioni di ciascun evento.