JavaScript/Gli eventi nel BOM

Wikibooks, manuali e libri di testo liberi.
Jump to navigation Jump to search

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]

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]

  • 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]

  • 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]

  • 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]

  • 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]

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.

Searchtool.svg Per approfondire, vedi JavaScript/Oggetto document.

Eventi come proprietà[modifica]

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]

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.