Javascript - Eventi

Interattività ed eventi

Attraverso il modello a oggetti del documento, è possibile associare l’esecuzione di un programma agli eventi che avvengono nell’interazione utente-browser.

Eventi generati dall’utente attraverso le proprie azioni.

Eventi generati dal browser(caricamento immagini, documento).

Elenco eventi

·      Abort: caricamento delle immagini interrotto

·      Blur: l’elemento ha perso il focus

·      Click: clic col tasto sinistro

·      Change: selezione e poi deselezione di una voce

·      ContextMenu: clic col tasto destro

·      DblClick: doppio click

·      Error: quando si verifica un errore al caricamento di un’immagine

·      Focus: focus su un elemento

·      KeyDown: l’utente preme un tasto

·      KeyUp: l’utente rilascia il tasto

·      KeyPress: l’utente preme e rilascia un tasto

·      Load: termina il caricamento di un documento o di una immagine

·      MouseDown: l’utente preme il pulsante del mouse

·      MouseUp: l’utente rilascia il pulsante del mouse

·      MouseOut: il mouse si sposta dall’elemento

·      MouseOver: il mouse va sopra l’elemento

·      Reset: l’utente preme il pulsante reset di una form

·      Resize: quando la finestra del browser viene ridimensionata

·      Submit: click su invio

·      Unload: il documento è tutto scaricato

Gestore eventi

Permettono di associare automaticamente il verificarsi di un evento  alla chiamata di un ‘istruzione o una funzione Javascript.

Dato un evento, si aggiunge il prefisso “on”:
onLoad, on MouseOver, ecc.

Gli eventi sono riferiti agli elementi html.

I gestori di eventi sono richiamati attraverso attributi html.

Associare istruzioni agli eventi

<a href=”http://www.unito.it” onclick=”alert(‘stai per accedere alla homepage di unito)”>Link</a>

Quando le istruzioni sono complesse è possibile far richiamare dai gestori delle funzioni dichiarate in precedenza.

<input type=”button” value=”Premi qui” onclick=”mia_funzione()”/>

Il gestore dell’evento richiama la funzione e, qualora la funzione restituisca un valore, esso viene passato all’evento.

<a href=”http://www.unito.it” onclick=”return(confirm(‘vuoi abbandonare la pagina?’))”>Link</a>

Se l’utente clicca “ok ”, return diventa true e l’evento viene eseguito.

Se l’utente clicca “annulla”, return diventa false e l’evento non viene eseguito.