Gestione Eventi

Gestione degli eventi HTML - 4

Come JavaScript può essere utilizzato per gestire gli eventi HTML

Eventi onload, onpageshow

Scrivo un po di codice JavaScript che deve funzionare subito. Non appena il caricamento della pagina è stato completato verrà disegnato un dischetto verde o rosso in corrispondenza dello spigolo alto a destra del canvas, ed un segmento blu.

Dischetto rosso - pagina caricata dalla cache
Dischetto verde - pagina caricata dalla server

Costruiamo una spezzata formata dai segmenti che vanno dal punto xi,yi al punto xf, yf.
Per iniziare una nuova spezzata, basta assegnare nuovi valori al punto xi, yi.

resetta   o pulisci

xIni    yIni

xFin    yFin

drawsLinea

Codice js: js_10.js

Evento onload

L'evento onload si verifica al termine del caricamento di un oggetto.

L'uso più frequente di onload è all'interno dell'elemento body per eseguire uno script dopo il completo caricamento di una pagina web: immagini, file di script, css, ...

Sintassi

HTML -
```
<elemeent onload="myScript">
```
JavaScript -
```
object.onload = function(){myScript};
```

JavaScript -

object.addEventListener("load", myScript);

Evento onpageshow

L'evento onpageshow si verifica quando un utente naviga su una pagina web.

La differenza con onload è che quest'ultimo non si verifica quando la pagina viene caricata dalla cache, mentre l'evento onpageshow si verifica ogni volta che la pagina viene visualizzata.

Per capire se una pagina viene caricata direttamente dal server o se la pagina è memorizzata nella cache si può usare la proprietà "persisted" dell'oggetto PageTransitionEvent. Questa proprietà restituisce true se la pagina era nella cache, false se caricata dal server.

Sintassi

HTML -
```
<elemeent onpageshow="myScript">
```

JavaScript -

object.onpageshow = function(){myScript};

JavaScript -

object.addEventListener("pageshow", myScript);

Esempio

Nello script di questa pagina ho inserito un "event handler" per l'evento "pageshow" La sua funzione è di disegnare un cerchietto in sorrispondenza dello spigolo superiore destro del canvas presente nella pagina, rosso se la pagina è stata richiamata dalla cache, verde se la pagina è stata caricata dal server.

L'evento onpageshow è stato "catturato" nel tag body. Ho provato ad inserire un event handler nel file esterno ma non funziona.

Nota

Il problema della mancata esecuzione del codice JavaScript al caricamento della pagina dipende dalla modalità con cui i vari componenti della pagina, .html, .css, .js, img, vengono caricati. Può, in modo casuale, verificarsi che il file o i file js termini il suo caricamento prima del completamento del caricamento del file html. In questo caso il codice JavaScript può non funzionare.

La modalità di caricamento dei file .js può essere controllata con gli attributi async / defer, ma per essere sicuri che js sia caricato dopo html basta inserire gli elementi script in fondo al file html, subito prima della tag di chiusura del body.

Sembra funzionare.