Gestione degli eventi del DOM

Esaminiamo ora la gestione degli eventi del Browser, una delle parti più importanti dell'API che riguarda Browser e DOM.

Un evento si scatena (trigger) quando viene eseguita una azione su un elemento presente nel DOM.

Elemento

azione sull'elemento da parte dell'utente

l'evento viene scatenato

Per gestire gli eventi scatenabili su un determinato elemento abbiamo a disposizione un ulteriore metodo:

element.addEventListener()

il metodo intercetta gli eventi scatenati sull'elemento e consente di eseguire un azione

Il metodo rappresenta un "handler", detto anche "Listener";

Come già visto in precedenza un handler, tradotto "verificatore" o "gestore", è un tipo di programma che attende che accada un evento.

Ogni evento ha associato un azione; una volta che l'evento ha luogo, il programma scatena l'azione collegata.

Il metodo accetta 3 paramenti:

Parametro	Descrizione
evento	È una stringa che definisce l'evento che vogliamo gestire (es. "load" o "click")
callback	qui inseriamo la chiamata a callback che definisce l'azione da eseguire
useCapture	opzionale; serve per "forzare" la priorità di gestione di un certo evento nei casi in cui abbiamo associato diversi handler allo stesso evento; valorizzando con "true" diventa il primo da eseguire; Di default è impostato su false e può essere omesso.

element.addEventListener('click', function(){
console.log('Evento click scatenato);
});

Breve nota: e' altresì possibile inserire con del codice in-line, all'interno del codice HTML, direttamente un handler, ovvero la gestione di un evento:

<a href="#" onclick="nomeFunzione()">Clicca per scatenare l'evento</a>

Chiaramente le funzioni devono essere dichiarate all'interno dei tag <script> o in un file incorporato e l'attributo onclick muterà nome in base al tipo di evento es. onclick, onmouseover ecc.

Eventi

Gli eventi monitorabili sono molteplici e si distinguono in base anche alle diverse possibilità presenti su differenti device, come un pc desktop o uno smartphone, e con cosa l'utente su di essi interagiscono.
Selezioniamo ed elenchiamo gli eventi più comuni:

Eventi UI

Selezione di eventi che si verificano quando l'utente agisce sull'interfaccia utente (UI)

load	E' terminato il caricamento della pagina
unload	Viene eliminata la pagina web ( in genere perchè è stata richiesta una nuova pagina)
error	Il browser ha rilevato un errore Javascript oppure la risorsa non esiste
resize	La finesta del browser è stata ridimensionata
scroll	L'utente ha eseguito uno scorrimento della pagina verso l'alto o verso il basso

Eventi della tastiera

Selezione di eventi che si verificano quando l'utente interagisce con la tastiera

keydown	L'utente ha premuto un tasto (si ripete se il tasto viene mantenuto premuto)
keyup	L'utente ha rilasciato un tasto
keypress	Sta per essere inserito in carattere (si ripete se il tasto viene mantenuto premuto)

Eventi del mouse

Selezione di eventi che si verificano quando l'utente interagisce con il mouse, il trackpad, o il touchscreen (uso limitato)

click	L'utente preme e poi rilascia un tasto del mouse su un elemento
dblclick	L'utente effettua una doppio-click su un elemento
mousedown	L'utente preme un tasto del mouse su un elemento
mouseup	L'utente rilascia un tasto del mouse su un elemento
mousemove	L'utente sposta il mouse (no-touchscreen)
mouseover	L'utente sposta il mouse su un elemento (no-touchscreen)
mouseout	L'utente sposta il mouse da un elemento (no-touchscreen)

Eventi di focus

Si verificano quando un elemento come un link, un campo di un modulo ed in genere un capo di input editabile riceve il focus

focus / focusin	L'elemento ottiene il focus
blur / focusout	L'elemento perde il focus

Eventi per moduli

Si verificano quando l'utente interagisce con elementi di un modulo

input	Il valore di un elemento di input editabile es <input> o <textarea> è cambiato
change	Il valore di una casella di selezione/opzioni è cambiato
submit	L'utente ha inviato il modulo
reset	L'utente ha fatto click sul tasto reset del modulo
cut	L'utente ha utilizzato il comando "taglia" su un elemento del modulo
copy	L'utente ha utilizzato il comando "copia" su un elemento del modulo
paste	L'utente ha utilizzato il comando "incolla" su un campo del modulo
select	L'utente ha selezionato del testo in un capo del modulo

Eventi di mutazione del DOM

Si verificano quando la struttura del DOM è modificata

DOMSubtreeModified	E' stata apportata una modifica al documento
DOMNodeInserted	Il nodo è stato inserito come figlio diretto di un altro nodo
DOMNodeRemoved	Il nodo è stato eliminato da un altro nodo
DOMNodeInsertedIntoDocument	Il nodo è stato inserito come discendente di un altro nodo
DOMNodeRemovedFormDocument	Il nodo è stato eliminato come discendente di un altro nodo

L'oggetto Event

L'oggetto "event" è un oggetto auto-generato che contiene informazioni aggiuntive relative all'evento scatento.
L'oggetto deve essere passato all'interno della funzione di callback e sempre al suo interno darà possibile utilizzare le sue proprietà.

element.addEventListener('keydown', function(event){
var tastoPremuto = (event.target);
console.log(tastoPremuto);
});

Note: il parametro all'interno della callback di un event-hendler può assumere qualcunque nome; farà comunque sempre riferimento all'oggetto event. 
Potremmo ritrovare spesso, oltre ad "event" scritto per intero, il nome "e".

Proprietà	Descrizione
event.target	restituisce il target dell'evento; ovvero l'elemento che subisce l'interazione.
event.type	restituisce il tipo di evento lanciato.
event.cancelable	annulla il comportamento standard dell'elemento.

Il flusso degli eventi

Quando effettuiamo un azione su un elemento in seguito ad un evento questa azione risale sino agli elementi genitori, quindi fino all'oggetto windows.

Questo perchè gli elementi HTML sono annidati in altri elementi.
Questo fenomeno è chiamato "risalita dell'evento" o "bubbling".
Ci saranno circostanze in cui questo comportamento standard, che è supportato dalla maggior parte dei browser, potrà portarci a comportamenti errati della gestione dell'evento in relazione agli elementi su cui vogliamo effettuare un azione.

event.stopPropagation();

Impedisce all'evento di risalire o discendere uteriormente

Un altro caso particolare riguarda il comportamento standard o di default di alcuni elementi presenti nel DOM.
Un link <a> ad esempio prevede l'apertura di un collegamento o un immagine <img> prevede che cliccandoci sopra apra l'immagine stessa.
Anche in questo caso potremmo voler modificare il loro comportamento standard in presenza di un evento per esempio di "click".

event.preventDefault();

Annulla il comportamento standard di un elemento