Eventi del browser

Nella lezione precedente, abbiamo visto come funziona il metodo .on() per gli eventi in jQuery. In questa lezione, approfondiamo i diversi tipi di eventi del browser.

Lista degli eventi del browser

Vediamo quali sono gli eventi del browser utilizzabili con .on().

Evento	Descrizione
`load`	Si verifica quando un elemento è completamente caricato.
`error`	Si verifica quando c'è un errore durante il caricamento di un elemento (ad esempio un'immagine che non può essere caricata).
`resize`	Si verifica quando la dimensione della finestra del browser viene modificata.
`scroll`	Si verifica con lo scroll della finestra o di un elemento.

Vediamoli in dettaglio.

L'evento "load"

L'evento "load" si verifica quando un elemento, o la pagina, è completamente caricata. Può essere utilizzato per eseguire azioni una volta che un elemento della pagina è stato caricato con successo, come ad esempio immagini HTML, script JS, file CSS, ecc.

Vediamo un esempio:

<!-- Immagine pesante di esempio -->
<img src="https://picsum.photos/2000">

<script>
$("img").on("load", function() {
  alert("L'immagine e' stata caricata con successo!");
});
</script>

Nell'esempio, quando l'immagine è completamente caricata, appare l'alert (che puoi approfondire nella lezione JavaScript sugli output).

L'evento "error"

L'evento "error" si verifica quando non è possibile caricare un elemento. Si riscontra spesso con le immagine o con gli script, ad esempio se il link non è funzionante.

Vediamo un esempio:

<img src="https://example.com/link/non/funziante.jpg">

<script>
$("img").on("error", function() {
  alert("Errore durante il caricamento dell'immagine");
});
</script>

L'evento "resize"

L'evento "resize" si verifica quando la dimensione della finestra del browser viene cambiata dall'utente.

Vediamo un esempio:

$(window).on("resize", function() {
  alert("La finestra del browser è stata ridimensionata");
});

L'evento "scroll"

L'evento "scroll" si verifica quando si scorre all'interno di un elemento scorrevole (come la finestra del browser o un elemento nella pagina).

Vediamo un esempio:

$(window).on("scroll", function() {
  alert("La pagina è stata scrollata");
});

Prova!Completa gli spazi vuoti con il testo appropriato.

// Esegui la funzione caricato() quando l'immagine viene
// completamente caricata, e nonCaricato() se si verifica un errore.

$("img").on("", function() {
caricato();
});
$("img").on("", function() {
nonCaricato();
});

Prova!Scegli l'opzione corretta tra quelle elencate.

// Esegui una funzione quando la pagina viene ridimensionata
$(window).on("____", function() {
ridimensionato();
});

	resized
	scroll
	resize