JavaScript/Gli eventi nel BOM

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:

<img src="logo.png" width="100px" onclick="alert('hai fatto click sull\'immagine!')" alt="Clicca per saluti" />

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:

<img src="logo.png" width="100px" onclick="salutaUtente()" alt="Clicca per saluti" />

Tramite questo sistema possiamo usufruire dell'oggetto this per riferirci all'elemento HTML a cui è stato applicato. Ad esempio:

<img src="logo.png" width="100px" onmouseover="this.src='logo2.png'" onmouseout="this.scr='logo.png'" alt="rollover" />

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.

Per approfondire, vedi JavaScript/Oggetto document.

Eventi come proprietà

Gli eventi possono essere anche impostati tramite il BOM, cioè tramite JavaScript. Ad esempio:

window.onload = "alert('pagina in caricamento...');";

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:

function saluta () {
 alert("pagina in caricamento");
};
window.onload = saluta(); //non funziona

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:

window.onload = saluta; //ora funziona

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:

window.onload = function () {
 alert("pagina in caricamento");
};

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:

<a href="pagina.htm" onclick="return confirm('vuoi veramente seguire il link?');">cliccami!</a>

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.