Categorie
Javascript Programmazione

{JS} DOM API: Eventi di interfaccia

Eventi di interfaccia

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” di 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.
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.

L’evento “unload” di chiusura pagina

 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.

Gli eventi “scroll” e “resize”

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.

Scroll

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.

Resize

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

Lascia un commento

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