# JavaScript/Gli eventi nel BOM

JavaScript
Copertina Tutti i moduli · Sviluppo
* IntroduzioneJavaScript/Introduzione
* Il nostro primo programmaJavaScript/Il nostro primo programma
* Tipi di dati e variabiliJavaScript/Tipi di dati e variabili
* Operatori e castingJavaScript/Operatori e casting
* Le strutture di controllo
** SelezioneJavaScript/Selezione
** IterazioneJavaScript/Iterazione
* Funzioni definite dall'utenteJavaScript/Funzioni definite dall'utente
* Programmazione ad oggettiJavaScript/Oggetti
** Oggetto StringJavaScript/Oggetto String
** Oggetto MathJavaScript/Oggetto Math
** Oggetto DateJavaScript/Oggetto Date
** Oggetto ArrayJavaScript/Oggetto Array
* CookieJavaScript/Cookie
* TimerJavaScript/Timer
* L'oggetto windowJavaScript/BOM
** Gli eventi nel BOMJavaScript/Gli eventi nel BOM
** Oggetto documentJavaScript/Oggetto document
** Altri oggetti del BOMJavaScript/Altri oggetti del BOM
* Il Document Object ModelJavaScript/DOM
** Proprietà e metodiJavaScript/Proprietà e metodi del DOM
** Gli eventi nel DOMJavaScript/Gli eventi nel DOM
* Espressioni regolariJavaScript/Espressioni regolari
* AJAX
** Introduzione ad AJAXJavaScript/Introduzione ad AJAX
** Usare AJAXJavaScript/Usare AJAX
* Costruttori e prototipiJavaScript/Costruttori e prototipi
* AppendiceJavaScript/Appendice
* CreditiJavaScript/Crediti
Modifica il sommario
Prima di completare la descrizione degli oggetti del BOM, ci occuperemo finalmente di un modo per rendere la nostra pagina HTML veramente dinamica: l'utilizzo degli eventi.
Un evento in JavaScript permette di eseguire determinate porzioni di codice a seconda delle azioni dell'utente o a stati della pagina: è possibile ad esempio collegare del codice al click di un oggetto oppure al ridimensionamento della pagina.

## Gli eventi in JavaScript

Di seguito è elencata una lista dei possibili eventi verificabili in JavaScript; da notare che gli eventi si riferiscono sempre ad un oggetto specifico (successivamente sarà spiegato come).

### Eventi del mouse

* onclick e ondblclick si verificano quando l'utente fa click o doppio click sull'elemento in questione
* onmousedown e onmouseup si verificano quando l'utente schiaccia il pulsante del mouse e quando lo rilascia
* onmouseover e onmouseout si verificano quando l'utente sposta il mouse dentro l'oggetto in questione e quando lo sposta fuori
* onmousemove si verifica quando l'utente muove il cursore dentro l'oggetto

### Eventi della tastiera

* onkeypress si verifica quando l'utente preme un tasto sulla tastiera quando il focus è sull'oggetto specificato
* onkeydown e onkeyup si verificano quando l'utente schiaccia un tasto e lo rilascia

### Eventi degli elementi HTML

* onfocus e onblur si verificano quando l'utente sposta il focus sull'oggetto in questione e quando toglie il focus dall'oggetto
* onchange si verifica quando l'utente modifica il contenuto dell'oggetto (è applicabile solo ai campi di modulo)
* onsubmit e onreset si possono applicare solo a moduli HTML e si verificano quando l'utente invia il form (pulsante di submit) o quando lo resetta (pulsante reset)
* onselect si verifica quando l'utente seleziona del testo

### Eventi della finestra

* onload e onunload si verificano quando la pagina viene caricata o quando viene chiusa
* onresize si verifica quando l'utente ridimensiona la finestra del browser
* onscroll si verifica allo scrolling della pagina

## Eventi come attributi HTML

Il modo più semplice di definire un evento è quello di inserirlo come attributo agli elementi HTML della pagina stessa. Ad esempio:
Nell'esempio associamo il codice JavaScript che mostra l'alert al click dell'utente sull'immagine HTML.
Ovviamente possiamo anche fare riferimento a funzioni o variabili dichiarate precedentemente nel corso della pagina HTML:
Tramite questo sistema possiamo usufruire dell'oggetto this per riferirci all'elemento HTML a cui è stato applicato. Ad esempio:
Con questa riga di HTML e qualche istruzione JavaScript creiamo quello che si chiama un rollover, cioè l'effetto di cambiamento dell'immagine quando il mouse passa sopra di essa.

## Eventi come proprietà

Gli eventi possono essere anche impostati tramite il BOM, cioè tramite JavaScript. Ad esempio:
Questo può risultare comodo per aggiungere eventi quando non si possono modificare direttamente gli oggetto HTML, ad esempio nel caso di script esterni creati per essere utilizzati più volte.
Attenzione a non incappare in questo tipo di errori:
In questo codice l'intenzione è quella di mostrare un avviso al caricamento della pagina; scrivendo saluta, però, il browser lo valuta come funzione; nel nostro caso, poiché tale funzione non restituisce alcun valore, al caricamento della pagina non succederà nulla. Per ottenere il risultato desiderato è necessario utilizzare la sintassi:
In questo modo facciamo riferimento non al risultato della funzione bensì al suo codice vero e proprio.
Un altro metodo consiste nell'assegnare alla funzione un oggetto function creato sul momento:

## Restituire dei valori

Quando si collega del codice ad un evento, è possibile impostare un valore di ritorno: se questo è false, verrà annullata l'azione predefinita:
Cliccando sul link verrà mostrato un messaggio di conferma; se si clicca il pulsante annulla la funzione restituirà false e di conseguenza restituirà false il codice collegato all'evento; in questo modo si elimina l'azione predefinita per l'evento click su un link, cioè non verrà caricata la pagina.
Questa funzionalità serve soprattutto per la convalida dei form : si collega all'evento onsubmit del form, una funzione che restituisca false nel caso di errori nella compilazione dei campi. Ovviamente non si può fare completo affidamento su questa funzionalità, in quanto i JavaScript possono essere facilmente disabilitati dall'utente.