Iniziamo dicendo che alcuni eventi sono originati non dall'interazione diretta dell'utente con una pagina HTML ma dal browser stesso. Gli eventi di questo tipo, detti anche eventi di interfaccia, segnalano il verificarsi di una situazione derivante dalla gestione interna della pagina HTML e dell'interfaccia grafica da parte del browser.
Spesso questi eventi sono l'effetto di un evento originato dall'utente. Un classico esempio è il click su un link che causa lo scaricamento della pagina corrente e il caricamento di una nuova pagina.
Anche questi eventi per così dire "indiretti" sono intercettabili e gestibili via JavaScript.
Load, avvenuto caricamento
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, come ad esempio un'immagine, uno script, un foglio di stile, un frame.
In generale, per gestire l'evento faremo riferimento all'attributo onload del corrispondente elemento HTML o alla proprietà onload dell'oggetto del DOM oppure sfruttiamo il metodo addEventListener() specificando il nome di evento load. Il seguente è un esempio di gestione inline dell'evento su un'immagine:
<script>
function avvisa() {
alert("Immagine caricata!");
}
</script>
<img id="img" src="miaImmagine.jpg" onload="avvisa()" />In alternativa possiamo gestirlo con gli altri due approcci come mostrato dal seguente codice:
var img = document.getElementById("img");
img.onload = avvisa;
// oppure ...
img.addEventListener("load", avvisa);L'utilizzo più comune che si fa di questo evento riguarda però il caricamento della pagina. Questa circostanza si verifica quando tutti gli elementi che la compongono (testo, immagini, stili e quant'altro) sono stati caricati ed è stato generato il corrispondente albero del DOM. Questo è l'evento ideale per effettuare inizializzazioni ed impostazioni prima di visualizzare il tutto all'utente.
Per intercettare e gestire l'evento di caricamento della pagina possiamo ricorrere all'attributo onload dell'elemento <body>:
<body onload="inizializza()">oppure alla proprietà onload dell'oggetto window:
window.onload = inizializza;Una domanda che può sorgere a questo punto riguarda il motivo per cui abbiamo messo in corrispondenza l'attributo onload dell'elemento <body> con l'omonima proprietà dell'oggetto window. Potrebbe sembrare più corretto metterlo in corrispondenza con la proprietà onload dell'oggetto document.
In realtà l'evento load associato alla proprietà onload dell'oggetto document evidenzia una situazione diversa da quella del caricamento dell'intera pagina. La proprietà document.onload consente di gestire l'evento load del documento, cioè la generazione del DOM, a prescindere dal caricamento delle altre risorse che compongono la pagina, come immagini, script, ecc.
L'evento associato a document.load, quindi, si verifica prima dell'evento associato a window.load, ma gestire un evento o l'altro per effettuare le nostre inizializzazioni dipende da cosa vogliamo concretamente inizializzare.
Ad esempio, se tra le nostre inizializzazioni prevediamo di accedere ad un elemento contenuto in un frame, non possiamo sfruttare document.onload, poichè al verificarsi del corrispondente evento non è garantito che la pagina associata al frame sia stata caricata. In questo caso dobbiamo ricorrere a window.onload.
L'evento load della pagina è un punto ideale per l'inizializzazione e perciò è molto utilizzato da diverse librerie per rendere disponibili le loro funzionalità. Se quindi nella nostra pagina facciamo uso di altre librerie, usando direttamente la proprietà o l'attributo onload per effettuare le nostre inizializzazioni rischiamo di sovrascrivere le eventuali inizializzazioni di queste librerie.
Questo è probabilmente il caso più emblematico in cui si rivela utile il metodo addEventListener(), che aggiunge le nostre inizializzazioni a quelle delle altre librerie senza sovrascriverle:
window.addEventListener("load", inizializza);Unload
Diametralmente opposto all'evento load è l'evento unload, che indica quando la pagina viene scaricata perchè l'utente sta navigando verso un'altra pagina o sta chiudendo la finestra corrente. A differenza dell'evento load, però, questo evento si verifica soltanto sulla pagina e va quindi intercettato tramite l'attributo onunload dell'elemento <body> o la proprietà window.onunload.
Scroll e resize
Altri eventi che possiamo classificare come eventi legati al browser sono l'evento scroll e l'evento resize. Il primo si verifica quando il contenuto di un elemento scorre per consentirne la visualizzazione, mentre il secondo si verifica quando cambiano le dimensioni di un elemento.
In entrambi i casi l'elemento in questione può essere la pagina o un qualsiasi elemento del DOM.
Ad esempio, il seguente codice visualizza sulla console del browser lo spostamento orizzontale e verticale in pixel del contenuto della pagina corrente:
window.onscroll = function() {
console.log(window.pageXOffset + "," + window.pageYOffset);
};Il seguente codice, invece, cattura il ridimensionamento della finestra del browser visualizzandone le dimensioni sulla console del browser:
window.onresize = function() {
console.log(window.innerWidth + "," + window.innerHeight);
};