jQuery: introduzione al modello degli eventi

Un evento è un'azione che ha luogo nella pagina con o senza l'interazione diretta dell'utente. jQuery ci permette di eseguire del codice ogni volta che questa azione ha luogo tramite i suoi gestori di eventi. In questo articolo forniremo uno sguardo di insieme degli eventi in jQuery.

Un evento può essere associato direttamente ad un elemento utilizzando il metodo che porta il nome dell'evento:

$( "#test" ).click(function() {

	//...

});

All'interno della funzione handler il riferimento all'elemento corrente viene indicato con $( this ):

$( "#test" ).click(function() {

	var $test = $( this );

});

La funzione utilizzata accetta come argomento un riferimento all'oggetto event, le cui proprietà e metodi più importanti sono:

• event.data: un oggetto letterale facoltativo passato alla funzione quando l'evento viene attivato sull'elemento
• event.namespace: il namespace specificato quando si innesca l'evento
• event.pageX: l'offset orizzontale del mouse rispetto al documento
• event.pageY: l'offset verticale del mouse rispetto al documento
• event.target: l'elemento DOM che ha creato l'evento
• event.type: il nome dell'evento
• event.preventDefault(): annulla l'azione predefinita associata all'evento (ad esempio sui link impedisce che questi aprano la risorsa specificata)
• event.which: per gli eventi associati al mouse ed alla tastiera, questa proprietà indica il tasto o il bottone premuto.

Esempio:

$( "a" ).click(function( e ) {
	e.preventDefault();

});

Purtroppo con l'associazione diretta degli eventi si può usare un solo gestore di eventi alla volta. Ecco perchè si consiglia di utilizzare metodi come on() quando si vogliono registrare più eventi sullo stesso elemento:

$( "a" ).on "click mouseover", function( e ) {

	var evtType = e.type;
	
	switch( evtType ) {
	
		case "click":
			e.preventDefault();
			break;
		case "mouseover":
			// ...
			break;
		default:
			break;
	
	}

});

Gli eventi possono anche essere lanciati senza un'azione diretta dell'utente:

$( "#test" ).click();
$( "#test" ).trigger( "click" );

Di seguito riporto la documentazione ufficiale degli eventi in jQuery.

Documentazione

Events