L'oggetto event e this

Nella gestione di un evento potremmo essere interessati ad ottenere informazioni specifiche su di esso e sull'elemento HTML su cui esso si è verificato. Immaginiamo ad esempio di avere assegnato un unico gestore dell'evento clic a tutti i pulsanti di una pagina:

var buttons = document.getElementsByTagName("button");
var handler = function() { console.log("Clic..."); };
for(var i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener("click", handler);
}

Come facciamo a sapere quale pulsante è stato cliccato? Un possibile approccio consiste nel far riferimento all'oggetto this all'interno della funzione che gestisce l'evento:

var buttons = document.getElementsByTagName("button");
var handler = function() { console.log("Clic su " + this.innerHTML); };
for(var i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener("click", handler);
}

L'oggetto this rappresenta normalmente l'elemento su cui si è verificato l'evento corrente. Tuttavia questo non è sempre vero, come vedremo più avanti quando parleremo del flusso di propagazione degli eventi. Inoltre, l'oggetto this non ci consente di avere informazioni specifiche sull'evento.

Il DOM prevede che ad ogni gestore di eventi venga passato come parametro l'oggetto event contenente informazioni su di esso. Alcune di queste informazioni sono generiche, cioè presenti per qualsiasi tipo di evento, altre sono specifiche per il particolare evento.

Vedremo le informazioni specifiche quando esploreremo i principali eventi che possiamo gestire. Per il momento segnaliamo la presenza della proprietà target che rappresenta l'elemento su cui si è verificato l'evento, in maniera indipendente da altri fattori come ad esempio il flusso degli eventi e quindi con maggiori garanzie rispetto all'oggetto this. Il gestore dell'evento clic dell'esempio precedente andrebbe dunque riscritto nel seguente modo:

var handler = function(e) { console.log("Clic su " + e.target.innerHTML); };

dove il parametro e indica l'oggetto event associato al clic e la sua proprietà target è il pulsante cliccato.

Insieme all'elemento su cui si è verificato l'evento possiamo individuare anche il tipo di evento tramite la proprietà type. Questa proprietà restituisce una stringa corrispondente al nome dell'evento:

var button = document.getElementById("btnClicca");
var handler = function(e) { console.log("Evento: " + e.type); };
button.addEventListener("click", handler);