JavaScript  »  Guide  »  Guida MooTools 

Il costruttore Event è un oggetto nativo che permette di gestire gli eventi in una modalità completamente cross-browser. I diversi browser, infatti, sono caratterizzati da una gestione degli eventi molto diversa tra loro. Internet Explorer utilizza gli eventi come proprietà globali dell'oggetto window (window.event) mentre i browser aderenti agli standard W3C utilizzano event come variabile locale. Anche il namespacing (così come le funzionalità) dei metodi è differente (IE: attachEvent/detachEvent - Firefox/Safari: addEventListener/removeEventListener).

Tramite la classe Event dunque, possiamo gestire gli eventi in sicurezza sapendo che le elaborazioni interne permettono al nostro codice di aderire alle diverse modalità di rendering. Vediamo un esempio:

$('myLink').addEvent('keydown', function(event){
	// nei gestori di eventi la variabile event passata come parametro è già estesa internamente da MooTools.
	// Di default il contesto dell'evento è l'oggetto window 
	
	// interrompre l'azione di default
	event.preventDefault();
	
	// interrompe la propagazione dell'evento
	event.stopPropagation();
	
	// operazioni...
});

Quando utilizziamo un gestore di eventi, abbiamo inoltre a disposizione una serie di proprietà per controllare lo stato, la posizione e le caratteristiche dell'evento. Ad esempio, event.shiftè impostato a true se abbiamo premuto il tasto "shift", event.key restituisce la lettera che abbiamo premuto (versione lowercased), event.page contiene le coordinate del mouse relative alla finestra e così via:

$('myLink').addEvent('keydown', function(event){
     
	// mostra la lettera premuta
	alert(event.key); 
	
	// true se abbiamo premuto il tasto 'shift'
	alert(event.shift);
	
	// '224 - 48'
	alert(event.page.x + ' - ' + event.page.y);
	
	// mostra l'elemento target dell'evento
	alert(event.target);
});

L'Hash Event.Keys

L'Hash Event.Keys, infine, contiene degli shortcuts molto utili per determinare il tasto premuto in una modalità intuitiva, aggiungendoli alla collezione di valori possibili della proprietà event.key vista in precedenza. Di default abbiamo a disposizone molti valori come 'left', 'right', 'enter', 'esc' e così via. Tuttavia possiamo estenderlo con proprietà personalizzate:

// aggiungiamo la proprietà 'shift'
Event.Keys.shift = 16;

// ora possiamo utilizzare un check su event.key per verificare se il tasto premuto è 'shift'
$('myLink').addEvent('keydown', function(event){
    if (event.key == "shift") alert("You pressed shift.");
});

Altri articoli

Altre guide

Altre newsletter