JavaScript avanzato - HTML5 con CSS e JavaScript - page 168

Qualunque sia l'evento che andiamo a intercettare, il codice da scrivere è sempre lo stesso:
nel codice HTML aggiungiamo un attributo per l'evento e, al suo interno, invochiamo una
funzione (detta anche delegato). Questa funzione non accetta parametri, ma al suo inter-
no la variabile this corrisponde all'oggetto che ha scatenato l'evento. Poter accedere
all'oggetto che ha scatenato l'evento può essere utile quando vogliamo che più controlli
reagiscano allo stesso modo a un evento (per esempio quando vogliamo scatenare la vali-
dazione dei controlli nel momento in cui perdono il fuoco).
Collegare il delegato all'evento attraverso un attributo HTML è molto semplice, ma ha
il problema di mischiare interfaccia e logica che è sempre bene tenere indipendenti per una
maggior pulizia del codice. Quando vogliamo mantenere separati interfaccia e logica, dob-
biamo sottoscriverci agli eventi da codice tramite il metodo addEventListener , come
mostrato nell'esempio 8.10 .
Esempio 8.10
window.addEventListener("load", function(){
document.getElementById("btn").addEventListener("click",
function(){
alert('cliccato');
});
});
Il metodo addEventListener accetta in input il nome dell'evento e la funzione da
invocare quando viene scatenato l'evento. In questo caso ci siamo sottoscritti all'evento
load della pagina e all'interno di questo metodo ci sottoscriviamo al click di un botto-
ne. Grazie a questa tecnica possiamo eliminare gli eventi dal codice HTML e gestire tutto
da JavaScript, garantendo una totale separazione tra interfaccia e logica.
nota
Così come il metodo addEventListener aggiunge un delegato a un evento,
il metodo removeEventListener , che ha la stessa firma, lo rimuove.
Oltre a manipolare il DOM, una delle necessità più comuni dello sviluppo client è quella di
accedere al server per recuperare dati: questa tecnica prende il nome di AJAX.