Bind, gestire gli eventi con jQuery

La gestione degli eventi in JavaScript rappresenta un altro aspetto tanto essenziale per l'interazione utente quanto mal digerito dai browser. Proprio per questo jQuery fornisce strumenti cross-browser particolarmente avanzati per gestire gli eventi e la loro relazione con gli elementi del DOM.

Una spiegazione dettagliata potrebbe risultare lunga e forse poco pratica, considerando che in generale il tipo di interazione più diffuso rimane sempre il classico click del mouse. Per iniziare vediamo un esempio:

$("a").bind("click",function (event) {
    alert($(this).attr("href"));
});

Questo esempio associa ad ogni tag a un evento che farà visualizzare il valore href del link specifico.

Gestire gli eventi

Un comportamento non molto diverso dall'esempio precedente l'avremmo ottenuto scrivendo la funzione dentro l'attributo onclick del tag. Quello che jQuery da in più è la capacità di gestire in modo semplice l'evento stesso. Anzitutto è da notare che this rappresenta sempre l'elemento a cui è associato l'evento e che non sempre è quello su cui si è realmente cliccato; questo avviene perché jQuery (rispettando la gestione eventi nativa in JavaScript) tenta di risalire l'albero del documento, attivando l'evento specifico nel primo elemento trovato. Un esempio:

<a href="index.html"><strong>Testo</strong></a>
$("a").bind("click",function (event) {
     alert($(this).attr("href"));
});

Quando clicchiamo sul link sopra, in realtà l'elemento su cui agiamo è il tag strong al quale tuttavia non è associato alcun evento. Quindi jQuery risale l'albero del DOM, trova l'evento che abbiamo associato al tag a e lo lancia. Questo è un modo intelligente per gestire gli elementi annidati slegandosi dal focus reale del nostro mouse.

Nel caso volessimo sapere qual è l'elemento realmente cliccato potremo basarci sulla proprietà .target dell'oggetto event che abbiamo passato come argomento alla funzione precedente:

$("a").bind("click",function (event) {
	var target = event.target;
	alert(target.tagName); //il nome del tag su cui abbiamo cliccato
});

Un'altra proprietà interessante dell'oggetto event è .type, che indica sotto forma di stringa il tipo di evento che è stato lanciato. Utilizzando questa proprietà potremmo per esempio creare una
funziona generica in cui, con un costrutto switch o if else, eseguire del codice in base ad eventi specifici:

function lanciaEvento (event) {
     if (event.type == "click") {
     		alert ("Click!");
     } else {
     		alert ("Un altro evento");
     }
}
$("a").bind("click focus blur",function (event) {
     lanciaEvento(event);
});

Oltre a darci la possibilità di trovare importanti informazioni sugli eventi, l'oggetto event ci permette di agire direttamente sul loro comportamento, per esempio bloccandone l'azione predefinita. Per fare un esempio: cliccando su un link l'azione predefinita del browser sarà quella di caricare la pagina indicata nell'attributo href. Per bloccare quest'azione predefinita, spesso si ricorre ad uno script del genere:

<a href="link.html" onclick="return false;">clicca qui</a>

Con jQuery diventa invece indolore utilizzare una funzione specifica di JavaScript ma non implementata in IE .preventDefault():

$("a").bind("click",function (event) {
	event.preventDefault(); //blocca l'evento di default
	// codice da eseguire
});

La stessa cosa può risultare utile per inviare i dati di un form con AJAX modificando il comportamento di un pulsante submit pur mantenendo la possibilità di inviare i dati normalmente nel caso JavaScript sia
disattivato:

$(":submit").bind("click",function (event) {
	event.preventDefault(); //blocca l'evento di default
	var action = $(this).parents("form").attr("action"); //determina il valore di action
	//codice AJAX qui
});