logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

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().

EventoDescrizione
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).
resizeSi 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();
});