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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]- 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
[modifica | modifica sorgente]- 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
[modifica | modifica sorgente]- 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
[modifica | modifica sorgente]- 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
[modifica | modifica sorgente]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à
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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.