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()?

Ap­pli­can­do il metodo jQuery.click() su un dato elemento HTML e spe­ci­fi­can­do una funzione come argomento, la funzione stessa viene ri­chia­ma­ta quando si fa clic sull’elemento in questione. Questa funzione può essere quindi uti­liz­za­ta in questo contesto per eseguire le azioni de­si­de­ra­te, come ad esempio:

• Modifica delle proprietà dell’elemento per mezzo di jQuery.addClass()
• At­ti­va­zio­ne di altri eventi
• Ca­ri­ca­men­to di contenuti tramite AJAX con jQuery.ajax()

Inoltre, jQuery.click() è com­bi­na­bi­le 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 co­no­scen­ze di base su jQuery, ti pro­po­nia­mo di dare un’occhiata al nostro tutorial su jQuery. Qui troverai ogni in­for­ma­zio­ne sulla sintassi e sui selettori.

Qual è la dif­fe­ren­za fra jQuery.click() e .onClick?

La dif­fe­ren­za fra jQuery.click e .onClick è prima di tutto che jQuery.click() è un metodo della libreria jQuery, mentre .onClick fa parte delle API DOM di Ja­va­Script come handler di eventi. Quest’ultimo è uti­liz­za­to di­ret­ta­men­te sull’elemento DOM e richiede l’in­di­ca­zio­ne di una funzione, che viene ri­chia­ma­ta 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 dif­fe­ren­za sta nel fatto che la funzione jQuery.click() offre de­ter­mi­na­ti vantaggi che vanno oltre il metodo .onClick nativo. Tra questi vi è la sem­pli­fi­ca­zio­ne della scrittura del codice, una migliore com­pa­ti­bi­li­tà con i browser e la pos­si­bi­li­tà di reagire di­na­mi­ca­men­te agli elementi aggiunti.

Esempio di ap­pli­ca­zio­ne 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.");
});