JavaScript  »  Guide  »  Guida 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

<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
});

Altri articoli

Altre guide

Altre newsletter