jQuery.on(): come collegare gestori di eventi

Il metodo jQuery.on() offre una sintassi sem­pli­fi­ca­ta e coerente per l’ela­bo­ra­zio­ne degli eventi, ri­sul­tan­do pertanto am­pia­men­te diffuso nello sviluppo di ap­pli­ca­zio­ni web in­te­rat­ti­ve. Ti pre­sen­tia­mo la sintassi ed esempi pratici per il­lu­strar­ne il fun­zio­na­men­to.

Cos’è il metodo jQuery.on()?

jQuery.on() può collegare i gestori di de­ter­mi­na­ti eventi a elementi. È impiegato nello sviluppo web per reagire alle in­te­ra­zio­ni degli utenti e chiamare funzioni. Con jQuery.on() è possibile definire gestori di eventi come clic, in­se­ri­men­ti da tastiera, movimenti del mouse, dati inseriti nei moduli e molto altro. Permette inoltre l’event de­le­ga­tion: collegare gestori di eventi a elementi anche se questi vengono aggiunti o rimossi durante l’ese­cu­zio­ne. Il codice da eseguire per l’evento potrebbe ad esempio essere l’aggiunta di una classe con jQuery.addClass(). Ma è possibile anche la lo­ca­liz­za­zio­ne di elementi con jQuery.find(). Puoi eseguire ite­ra­zio­ni con il ciclo jQuery.each() nel blocco funzione. I metodi di ela­bo­ra­zio­ne degli eventi possono inoltre essere integrati co­mo­da­men­te con jQuery su WordPress.

Come si pre­sen­ta­no 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.
• child­Se­lec­tor: opzionale, è un selettore CSS che indica quali elementi su­bor­di­na­ti devono attivare l’evento.
• data: dati ag­giun­ti­vi 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 uti­liz­zan­do una mappatura oggetto.

Trovi ulteriori in­for­ma­zio­ni sulle notazioni e le funzioni nel tutorial su jQuery della nostra guida.

Un esempio di ap­pli­ca­zio­ne di jQuery.on()

Con il metodo jQuery.on() puoi collegare eventi ed eseguire un de­ter­mi­na­to codice all’at­ti­va­zio­ne. Di seguito ti pre­sen­tia­mo l’ela­bo­ra­zio­ne 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 vi­sua­liz­za­to il messaggio “Il pulsante è stato cliccato!”. Uti­liz­zan­do jQuery.on() puoi anche gestire altri eventi come “mouseover”, “keydown” o “submit” e definire le relative funzioni di ciascun evento.