Una delle migliori caratteristiche di jQuery è quella di poter gestire in maniera semplice ed efficace gli eventi HTML.
Ma cosa sono gli eventi? Gli eventi accadono quanto un utente compie un interazione con la pagina, alcuni esempi di eventi sono i seguenti:
il passaggio del mouse su un elemento
il click su un bottone
la selezione di valore in una tendina (select)
Inoltre esistono degli eventi legati alla pagina, come ad esempio possono essere load, resize o scroll.
In pratica jQuery mette a disposizone dei metodi omonimi agli eventi che ci consentono di catturare l’esatto momento in cui un evento avviene, ma soprattutto ci consentono di fare qualche cosa quando un evento avviene.
$('#miDiv').click()
Il codice scritto sopra gestisce l’evento click sull’elemento HTML con id myDiv, se vogliamo fare qualcosa in seguito a questo evento dovremmo scrivere qualcosa del tipo:
$('#miDiv').click(function() {
alert('Hai cliccato');
})
Questo funzionamento è molto simile per tutti i metodi legati ad eventi, ad esempio possiamo gestire il doppio click con il metodo dblclick(), ecco un esempio di utilizzo:
$("a.class").click(function(){
$(this).hide();
});
Altri metodi interessanti sono il mouseenter() che tiene traccia dell’evento generato quando il mouse entra su un dato oggetto, il simmetrico di tale evento è il mouseleave(), ossia l’evento lanciato quando “usciamo” da un oggetto.
Altra coppia di eventi che potrebbero tornare utili sono mousedown() e mouseup(), che catturano rispettivamente la pressione del bottone mouse su un oggetto e il suo rilascio.
Per quanto riguarda gli elementi di un form possono tornare utili gli eventi (e quindi i metodi) focus() e blur(), che vengono generati quando un oggetto riceve il fuoco (focus) e quando lo perde (blur).
Un metodo con una sintassi un po’ diversa è hover(), che in pratica è la somma di mouseenter() e mouseleave(), al quale vanno associate 2 funzioni secondo la seguente sintassi:
$("#id").hover(function(){
alert("Sei in #id!");
},
function(){
alert("Sei fuori da #id!");
});