JAVASCRIPT
JAVASCRIPT
←
{JS} DOM API: Eventi di interfaccia
home / javascript /
Lucio Paolo Asciolla
Senior Full Stack Developer
Alcuni eventi sono originati non dall'interazione diretta dell'utente con una pagina HTML ma dal browser stesso. Questi eventi sono detti eventi di interfaccia; possiamo immaginarli come degli eventi auto-scatenati da azioni stesse del browser o dall'interazioni da parte dell'utente con il browser.
L'evento load si verifica quando un oggetto viene caricato dal browser. L'oggetto in questione può essere la pagina stessa o uno dei vari componenti che prevedono una richiesta al server.
Ecco alcuni esempi:
window.addEventListener('load', function(){
console.log('La finestra è stata caricata');
});
body.addEventListener('load', function(){
console.log('L\'elemento body della pagina è stato caricato');
});
var immagine = document.querySelector('img.classe');
immagine.addEventListener('load', function(){
console.log('L\'immagine è stata caricata');
});
Nei precedenti esempi abbiamo utilizzato il metodo "load" per mostrare un messaggio al caricamento di diversi componenti sia del browser sia della pagina.
E' possibile utilizzare una sintassi alternativa:
function loadCompleto(element){
console.log(`Caricamento completato di ${element}`);
}
window.onload = loadCompleto(this);
// Caricamento completato di [object Window]
E' possibile associare l'evento load sia a windows sia a document è potremmo chiederci quale sia la reale differenza.
La differenza è che document.load monitora la lettura/generazione del DOM, a prescindere dal caricamento delle altre risorse che compongono la pagina, come immagini, script, ecc.
mentre window.load comprende tutto ciò che compone la nostra pagina e tutto ciò che è escluso da document.load.
All'evento load è contrapposto l'evento unload;
Quest'ultimo indica quando la pagina viene scaricata perchè l'utente sta navigando verso un'altra pagina o sta chiudendo la finestra corrente.
L'evento unload però, si verifica soltanto sulla pagina e va quindi intercettato sull'elemento <body> o sulla window.
Altri eventi legati agli eventi di interfaccia sono l'evento scroll e l'evento resize.
L'evento resize intercetta quando l'utente ridimensione la finestra del browser.
L'evento scroll intercetta quando l'utente scorre la pagina su e giu.
document.addEventListener('scroll', function(){
console.log('Numero di pixel scorsi verticalmente ' + window.scrollY);
console.log('Numero di pixel scorsi orizzontalmente ' + window.scrollX);
});
Con l'evento scroll tornano utili le proprietà dell'oggetto window
| window.scrollY; window.pageYOffset; | restituisce il numero di pixel per cui il documento è attualmente fatto scorrere verticalmente. |
| window.scrollX; window.pageXOffset; | restituisce il numero di pixel per cui il documento è attualmente fatto scorrere orizzontalmente. |
L'evento resize intercetta quando l'utente ridimensione la finestra del browser.
window.addEventListener('resize', function(){
console.log('Larghezza attuale della finestra: ' + window.innerWidth);
console.log('Altezza attuale della finestra: ' + window.innerHeight);
});
Cosi facendo quando ridimensioneremo la finestra del browser ci saranno mostrate le dimensioni attuali.
Possono tornaci utili le seguenti proprietà:
| screen.width; screen.height; | Ottieni le dimensioni dello schermo del dispositivo |
| window.innerWidth; window.innerHeight; | Ottieni le dimensioni del finestra del browser |
| document.documentElement.scrollWidth; document.documentElement.scrollHeight; | Ottieni le dimensioni dell'intera pagina web |