Categorie
Javascript Programmazione

{JS} DOM API: Gestione degli eventi

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.

Elementoazione sull’elemento da parte dell’utentel’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:

ParametroDescrizione
eventoÈ una stringa che definisce l’evento che vogliamo gestire (es. “load” o “click”)
callbackqui inseriamo la chiamata a callback che definisce l’azione da eseguire
useCaptureopzionale; 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)

loadE’ terminato il caricamento della pagina
unloadViene eliminata la pagina web ( in genere perchè è stata richiesta una nuova pagina)
errorIl browser ha rilevato un errore Javascript oppure la risorsa non esiste
resizeLa finesta del browser è stata ridimensionata
scrollL’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

keydownL’utente ha premuto un tasto (si ripete se il tasto viene mantenuto premuto)
keyupL’utente ha rilasciato un tasto
keypressSta 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)

clickL’utente preme e poi rilascia un tasto del mouse su un elemento
dblclickL’utente effettua una doppio-click su un elemento
mousedownL’utente preme un tasto del mouse su un elemento
mouseupL’utente rilascia un tasto del mouse su un elemento
mousemoveL’utente sposta il mouse (no-touchscreen)
mouseoverL’utente sposta il mouse su un elemento (no-touchscreen)
mouseoutL’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 / focusinL’elemento ottiene il focus
blur / focusoutL’elemento perde il focus

Eventi per moduli

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

inputIl valore di un elemento di input editabile es <input> o <textarea> è cambiato
changeIl valore di una casella di selezione/opzioni è cambiato
submitL’utente ha inviato il modulo
resetL’utente ha fatto click sul tasto reset del modulo
cutL’utente ha utilizzato il comando “taglia” su un elemento del modulo
copyL’utente ha utilizzato il comando “copia” su un elemento del modulo
pasteL’utente ha utilizzato il comando “incolla” su un campo del modulo
selectL’utente ha selezionato del testo in un capo del modulo

Eventi di mutazione del DOM

Si verificano quando la struttura del DOM è modificata

DOMSubtreeModifiedE’ stata apportata una modifica al documento
DOMNodeInsertedIl nodo è stato inserito come figlio diretto di un altro nodo
DOMNodeRemovedIl nodo è stato eliminato da un altro nodo
DOMNodeInsertedIntoDocumentIl nodo è stato inserito come discendente di un altro nodo
DOMNodeRemovedFormDocumentIl 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.targetrestituisce il target dell’evento; ovvero l’elemento che subisce l’interazione.
event.typerestituisce il tipo di evento lanciato.
event.cancelableannulla 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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *