jQuery.click(): come rilevare gli eventi clic sugli elementi

Anziché scrivere complessi handler di eventi, esiste un modo molto semplice per collegare le funzioni a eventi clic su elementi HTML per mezzo di jQuery.click(). Con questo metodo, il codice sorgente risulta più chiaro e compatto.

Che cos’è il metodo jQuery.click()?

Applicando il metodo jQuery.click() su un dato elemento HTML e specificando una funzione come argomento, la funzione stessa viene richiamata quando si fa clic sull’elemento in questione. Questa funzione può essere quindi utilizzata in questo contesto per eseguire le azioni desiderate, come ad esempio:

• Modifica delle proprietà dell’elemento per mezzo di jQuery.addClass()
• Attivazione di altri eventi
• Caricamento di contenuti tramite AJAX con jQuery.ajax()

Inoltre, jQuery.click() è combinabile in modo efficace anche con le funzioni iterative come jQuery.each().

Qual è la sintassi del metodo jQuery.click()?

La sintassi di jQuery.click() è la seguente:

$(selector).click(function);

In questo caso, function è un parametro opzionale che viene eseguito quando si verifica un evento clic.

Se desideri fare un ripasso delle tue conoscenze di base su jQuery, ti proponiamo di dare un’occhiata al nostro tutorial su jQuery. Qui troverai ogni informazione sulla sintassi e sui selettori.

Qual è la differenza fra jQuery.click() e .onClick?

La differenza fra jQuery.click e .onClick è prima di tutto che jQuery.click() è un metodo della libreria jQuery, mentre .onClick fa parte delle API DOM di JavaScript come handler di eventi. Quest’ultimo è utilizzato direttamente sull’elemento DOM e richiede l’indicazione di una funzione, che viene richiamata in presenza di un evento. La sintassi presenta la forma element.onClick = handler, dove element è l’elemento DOM e handler è la funzione che viene eseguita per un evento clic.

Un’ulteriore differenza sta nel fatto che la funzione jQuery.click() offre determinati vantaggi che vanno oltre il metodo .onClick nativo. Tra questi vi è la semplificazione della scrittura del codice, una migliore compatibilità con i browser e la possibilità di reagire dinamicamente agli elementi aggiunti.

Esempio di applicazione di jQuery.click()

Il seguente evento clic jQuery.click() button apre una finestra pop-up con il testo The button was clicked in caso di clic sull’elemento.

$("button").click(function(){
    alert("The button was clicked.");
});