Quando usi il browser, questo registra diversi tipi di eventi: per esempio quando l’utente clicca su un pulsante, invia un modulo o passa sopra un elemento. È il modo in cui il browser ti dice che l’utente ha appena compiuto un’azione. Il tuo script può allora rispondere a questi eventi. Spesso lo fa aggiornando il contenuto della pagina tramite l’oggetto document, il che rende la pagina più interattiva. In questo capitolo ti elenco i vari tipi di evento su cui puoi lavorare per rendere le tue pagine un po’ più interattive.
Questo articolo non è completo e può essere soggetto ad aggiornamenti
Assegnare una funzione a un evento
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world');
}
bouton.onclick = MonAlert;Tutti i browser moderni capiscono questo modo di assegnare una funzione a un evento, ma puoi collegare una sola funzione per evento e non puoi passarle parametri: le parentesi vanno tolte, altrimenti il codice parte subito.
Svantaggio
Se vuoi assegnare più funzioni allo stesso evento, quella precedente viene sovrascritta dalla nuova.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!')
}
bouton.onclick = MonAlert;
bouton.onclick = AlertTOTO;Risultato: comparirà il messaggio Toto!.
Event Listener
Gli event listener sono un metodo più moderno, che permette di assegnare a uno stesso evento più funzioni alla volta.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!');
}
bouton.addEventListener('click', MonAlert);
bouton.addEventListener('click', AlertTOTO);Il metodo addEventlistener() accetta tre parametri:
element.addEventlistener('evenement', NomDeFonction, Boolean);
- evenement: il nome dell’evento che vuoi ascoltare ( blur, click, … );
- Il codice da eseguire: può essere una funzione dichiarata prima oppure una funzione anonima.
- Un
booleanche indica la fase di propagazione dell’evento, il valore predefinito è false.
Svantaggio
Questo metodo non è supportato dai browser più vecchi.
Usare i parametri
Abbiamo visto che non si possono mettere le parentesi quando si assegna una funzione a un evento. Per riuscirci si crea una funzione anonima da assegnare all’evento e, dentro di essa, si chiamano le proprie funzioni con i parametri.
function MonAlert(message) {
alert(message);
}
bouton.addEventListener('click', function() {
MonAlert('Mon message qui s'affiche!');
});L’oggetto Event
Quando si verifica un evento esiste un oggetto evento che contiene informazioni sull’evento e sull’elemento su cui si è verificato.
var bouton = document.getElementById('click');
function MonAlert(e) {
console.log(e.target);
}
bouton.onclick = MonAlert;Con un event listener e dei parametri
var bouton = document.getElementById('click');
function MonAlert(e, message) {
console.log(e.target);
console.log(message);
}
bouton.addEventListener('click', function(e){
MonAlert(e, "hello world!");
});Proprietà
| Proprietà | Descrizione |
|---|---|
target | L’elemento che ha scatenato l’evento |
type | L’evento che è stato scatenato |
Metodo
| Metodo | Descrizione |
|---|---|
preventDefault() | Annulla il comportamento predefinito di un evento (se è annullabile) |
stopPropagation() | Ferma la propagazione dell’evento. |
Elenco degli eventi
Ecco un piccolo elenco, non esaustivo, degli eventi che si incontrano più spesso.
Browser
| Evento | Descrizione |
|---|---|
load | Si scatena quando il browser ha finito di caricare. Può scattare anche sui nodi di altri elementi caricati, come immagini, script od oggetti. |
unload | è il contrario dell’evento load: si scatena quando si cambia pagina. |
resize | si scatena quando l’utente cambia la dimensione della finestra del browser. |
scroll | si scatena quando l’utente scorre la pagina o un elemento. |
error | error si scatena quando il browser incontra un errore JavaScript. |
Mouse
| Evento | Descrizione |
|---|---|
click | Si scatena quando l’utente clicca su un elemento |
dblclick | Come click, ma quando l’utente fa un doppio clic rapido. |
mouseup | Si scatena quando l’utente tiene premuto un pulsante del mouse. |
mousedown | Si scatena quando l’utente rilascia un pulsante del mouse. |
mousemove | Si scatena quando il cursore si sposta. |
mouseover | si scatena quando il cursore passa sopra un elemento. |
mouseout | si scatena quando il cursore esce da un elemento su cui stava passando, oppure entra in un suo elemento figlio. |
Tastiera
| Evento | Descrizione |
|---|---|
input | Si scatena quando cambia il valore di un elemento <input> o <textarea>. |
keydown | Si scatena quando l’utente preme un tasto della tastiera. Se tiene il tasto premuto, l’evento continua a scattare ripetutamente. |
keypress | Si scatena quando l’utente preme un tasto che porta alla comparsa di un carattere sullo schermo. Per esempio non scatta quando l’utente preme i tasti freccia, mentre keydown lo fa. Se l’utente tiene il tasto premuto, l’evento continua a scattare ripetutamente come per keydown. |
keyup | Si scatena quando l’utente rilascia un tasto della tastiera. Gli eventi keydown e keypress scattano prima che il carattere compaia sullo schermo, mentre keyup scatta dopo la sua comparsa. |
Sapere quale tasto è stato premuto
Con l’oggetto Event puoi sapere quale tasto è stato premuto usando e.keycode, che restituisce il codice ASCII del tasto della tastiera.
Moduli
| Evento | Descrizione |
|---|---|
submit | Si scatena quando l’utente preme il pulsante di invio del modulo. |
change | Si scatena quando cambia lo stato di alcuni elementi di modulo. ( radio, checkbox e select ) |
