Eventi jQuery

Nella maggior parte delle applicazioni web, l'utente fa qualche azione per eseguire un'operazione. Ad esempio, l'utente clicca sul pulsante di salvataggio per salvare i dati modificati in una pagina web. Qui, cliccando sul pulsante, l'utente esegue un'azione che fa scattare il click su evento e il click su l'event handler (funzione) fa salvare i dati.

Categoria Metodo Evento DOM
Eventi tastiera keydown() onkeydown
keypress() onkeypress
keyup() onkeyup
focusout()
Eventi mouse click() onclick
dblclick() ondblclick
focusout()
hover()
mousedown() onmousedown
mouseenter() onmouseenter
mouseleave() onmouseleave
mousemove() onmousemove
mouseout() onmouseout
mouseover() onmouseover
mouseup() onmouseup
toggle()
Eventi form blur() onblur
change() onchange
focus() onfocus
focusin() onfocusin
select() onselect
submit() onsubmit
Eventi browser resize() onresize
scroll() onscroll
Caricamento load() onload
ready()
unload() onunload

Per gestire gli eventi DOM usando i metodi jQuery per prima cosa ottenere il riferimento dell'elemento o degli elementi DOM usando il selettore jQuery e invocare il metodo jQuery appropriato.

L'esempio seguente mostra come gestire un evento click del pulsante.

$('#btnsalva').click(function () {
   alert('Hai premuto il pulsante');
});

Usiamo prima di tutto il selettore id per ottenere un riferimento del pulsante Salva e poi chiamiamo il metodo click(). Abbiamo specificato la funzione event handler (gestore d'evento) come funzione di callback, che sarà chiamata ogni volta che l'evento di click del pulsante Salva viene attivato.

jQuery passa un oggetto evento ad ogni funzione di gestione eventi. L'oggetto evento include importanti proprietà e metodi per la coerenza del cross-browser, ad esempio target, pageX, pageY, relatedTarget, ecc.

Una particolarità è l'utilizzo di this che nell'event handler rappresenta un elemento DOM che ha sollevato un evento.

$(':button').click(function (eventObj) {
   alert(this.value + ' ' + this.type + ' cliccato');
});

jQuery fornisce vari metodi per gli eventi di mouse hover, ad esempio mouseenter, mouseleave, mousemove, mouseover, mouseout e mouseup.

$('#mioDiv').mouseenter(function (data) {
           $(this).css('background-color','yellow');
       });

$('#mioDiv').mouseleave(function (data) {
           $(this).css('background-color','green');
       });

È possibile utilizzare il metodo hover() invece di gestire separatamente gli eventi mouseenter e mouseleave.

$('#mioDiv').hover(function () {
       $(this).css('background-color','yellow');        
   },
   function () {
       $(this).css('background-color','green');
   });

jQuery keydown() e keyup()

Il keydown() è un metodo integrato in jQuery che viene utilizzato per attivare l'evento keydown ogni volta che l'utente preme un tasto sulla tastiera.

$(selettore).keydown(funzione)

$(document).keydown(function(event) {
       alert('Hai premuto un tasto');
   });

Invece keyup() si riferisce all'evento keyup, quando l'utente rilascia il tasto della tastiera.