JavaScript - Eventi della finestra/documento

Ciao a tutti, aspiranti programmatori! Oggi esploreremo il mondo emozionante degli eventi JavaScript, concentrandoci in particolare sugli eventi della finestra e del documento. Come il tuo amico insegnante di informatica del quartiere, sono qui per guidarti in questo viaggio con tanti esempi e spiegazioni. Allora, prenditi la tua bevanda preferita, mettiti comodo e iniziamo!

Eventi della finestra

Gli eventi della finestra sono azioni che si verificano in relazione alla finestra del browser stessa. Questi eventi possono essere estremamente utili per creare applicazioni web dinamiche e reattive. Esploriamo alcuni degli eventi della finestra più comuni:

1. load

L'evento load viene scatenato quando l'intera pagina, inclusi tutti i risorse dipendenti come fogli di stile e immagini, ha finito di caricarsi. Questo viene spesso utilizzato per assicurarsi che tutti gli elementi siano disponibili prima di eseguire script.

window.addEventListener('load', function() {
console.log("Pagina completamente caricata!");
});

In questo esempio, stiamo aggiungendo un listener di eventi all'oggetto window. Quando si verifica l'evento 'load', la nostra funzione verrà eseguita, registrando un messaggio nella console.

2. resize

L'evento resize viene scatenato ogni volta che la finestra del browser viene ridimensionata. Questo può essere utile per adattare i layout o ricalcolare le dimensioni.

window.addEventListener('resize', function() {
console.log("Finestra ridimensionata a: " + window.innerWidth + "x" + window.innerHeight);
});

Qui, stiamo registrando le nuove dimensioni della finestra ogni volta che viene ridimensionata. Questo potrebbe essere utile per gli adattamenti del design reattivo.

3. scroll

L'evento scroll viene scatenato quando l'utente scorre nella finestra. Questo può essere utilizzato per implementare la navigazione infinita o mostrare/nascondere elementi in base alla posizione di scorrimento.

window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
console.log("Scorriamo alla posizione: " + scrollPosition);

if (scrollPosition > 300) {
document.getElementById('backToTop').style.display = 'block';
} else {
document.getElementById('backToTop').style.display = 'none';
}
});

In questo esempio, stiamo mostrando un pulsante 'Torna in alto' quando l'utente ha scorbito più di 300 pixel verso il basso della pagina.

4. unload

L'evento unload viene scatenato quando l'utente naviga lontano dalla pagina. Questo può essere utilizzato per compiti di pulizia o per avvisare l'utente prima di lasciare.

window.addEventListener('unload', function(event) {
event.preventDefault();
event.returnValue = '';
});

Questo codice avvierà una conferma con un dialogo quando l'utente tenta di lasciare la pagina. Ricorda di usarlo con parsimonia, poiché può essere fastidioso per gli utenti!

Eventi del documento

Gli eventi del documento sono correlati al documento HTML stesso. Questi eventi ci permettono di interagire con il contenuto della pagina in vari modi. Esploriamo alcuni eventi chiave del documento:

1. DOMContentLoaded

L'evento DOMContentLoaded viene scatenato quando il documento HTML iniziale è stato completamente caricato e analizzato, senza aspettare che le risorse esterne finiscano di caricarsi.

document.addEventListener('DOMContentLoaded', function() {
console.log("DOM pronto!");
document.getElementById('myButton').addEventListener('click', function() {
alert("Pulsante cliccato!");
});
});

Questo evento è spesso preferito rispetto a window.load perché non aspetta che le immagini e altre risorse finiscano di caricarsi, permettendo un'esecuzione più rapida degli script.

2. click

L'evento click viene scatenato quando un elemento viene cliccato. Questo è uno degli eventi più comuni con cui lavorerai.

document.getElementById('myButton').addEventListener('click', function(event) {
console.log("Pulsante cliccato alle coordinate: " + event.clientX + ", " + event.clientY);
event.target.style.backgroundColor = 'red';
});

In questo esempio, stiamo registrando le coordinate del clic e cambiando il colore del pulsante quando viene cliccato.

3. keydown e keyup

Questi eventi vengono scatenati quando un tasto viene premuto (keydown) o rilasciato (keyup).

document.addEventListener('keydown', function(event) {
console.log("Tasto premuto: " + event.key);
if (event.key === 'Enter') {
document.getElementById('submitButton').click();
}
});

Questo codice registra ogni pressione di tasto e simula un clic su un pulsante di invio quando si preme il tasto Invio.

4. mouseover e mouseout

Questi eventi vengono scatenati quando il puntatore del mouse entra (mouseover) o esce (mouseout) da un elemento.

let hoverElement = document.getElementById('hoverMe');

hoverElement.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});

hoverElement.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});

Questo crea un semplice effetto di passaggio del mouse, cambiando il colore di sfondo di un elemento quando il mouse è sopra di esso.

Tabella dei metodi degli eventi

Ecco una tabella utile che riassume i metodi che abbiamo discusso:

Evento	Descrizione	Esempio
load	Scatenato quando la pagina è completamente caricata	window.addEventListener('load', function() {...})
resize	Scatenato quando la finestra è ridimensionata	window.addEventListener('resize', function() {...})
scroll	Scatenato quando la finestra è scorsa	window.addEventListener('scroll', function() {...})
unload	Scatenato quando si naviga lontano dalla pagina	window.addEventListener('unload', function(event) {...})
DOMContentLoaded	Scatenato quando il DOM è pronto	document.addEventListener('DOMContentLoaded', function() {...})
click	Scatenato quando un elemento è cliccato	element.addEventListener('click', function(event) {...})
keydown	Scatenato quando un tasto è premuto	document.addEventListener('keydown', function(event) {...})
keyup	Scatenato quando un tasto è rilasciato	document.addEventListener('keyup', function(event) {...})
mouseover	Scatenato quando il mouse entra nell'elemento	element.addEventListener('mouseover', function() {...})
mouseout	Scatenato quando il mouse esce dall'elemento	element.addEventListener('mouseout', function() {...})

Ecco qui, ragazzi! Abbiamo coperto le basi degli eventi della finestra e del documento in JavaScript. Ricorda, la pratica rende perfetti, quindi non aver paura di sperimentare con questi eventi nei tuoi progetti. Prima di sapere, sarai creare pagine web interattive e dinamiche come un professionista!

Buon coding, e possa i tuoi eventi sempre scoccare come previsto!

Credits: Image by storyset