Eventi
Nella lezione precedente abbiamo visto come ogni programma sia
costituito da un'interfaccia e da un codice. L'utente agisce
sull'interfaccia (per esempio cliccando sul mouse) e in questo modo
attiva il codice nascosto. A sua volta il codice nascosto agisce
sull'interfaccia per rispondere alle azioni dell'utente (per esempio per
modificare il valore visualizzato in una casella di testo).
Ciò che lega l'azione dell'utente sull'interfaccia all'esecuzione del
codice prende il nome di evento. In generale un evento è
qualsiasi operazione che l'utente può compiere su una pagina (cioè sull'interfaccia):
fare click col mouse, modificare il contenuto di una casella di testo,
passare col mouse sopra a una immagine, eccetera.
Consideriamo di nuovo l'esempio dell'immagine animata visto nelle lezioni
precedenti:
<img alt="animazione" id="omino" src="../immagini/omino1.jpg" width="209" height="396" onclick="muovi()">
In questo caso l'evento che fa eseguire la funzione muovi è il click col
mouse dell'utente sull'immagine. Si noti la sintassi:
onclick = "nomefunzione()"
L'attributo onclick si chiama tecnicamente gestore di eventi
(event handler).
Si tratta di un attributo che può essere applicato a qualsiasi elemento di
una pagina (paragrafi, immagini, tabelle etc.) e il suo significato è:
quando l'utente fa click col mouse sull'elemento, viene eseguito il codice
javascript della funzione scritta fra doppi apici.
Si noti che il gestore di eventi onclick non fa parte del
linguaggio JS, ma dell'html. Si tratta infatti di un attributo
universale, cioè applicabile come si è detto a
qualsiasi elemento (come per esempio gli attributi class e id).
Infatti, mentre il JS è case sensitive (cioè sensibile alla differenza
fra maiuscole e minuscole), l'HTML non lo è: dunque i gestori di eventi
possono essere scritti indifferentemente in maiuscolo o in minuscolo. Spesso
infatti onclick viene indifferentemente scritto come onClick
per separare visivamente meglio le due parti del nome.
Consideriamo adesso quest'altro esempio:
L'interfaccia è realizzata mediante un form in html nel seguente modo:
<form action="">
<table border="0" bgcolor="#c0c0c0" width="185" cellspacing="0"
align="center">
<tr>
<td bgcolor="#000080" colspan="3"><span style="font-size:16px;
font-family:verdana, arial, helvetica, sans-serif; color:#ffffff">
<b>Convertitore</b></span>
</td>
</tr>
<tr>
<td><span style="font-size:12px; font-family:verdana, arial,
helvetica"><b>Centrigradi</b></span></td>
<td rowspan="2" align="center"><span style="font-size:12px;
font-family:verdana, arial, helvetica"><b>:</b></span></td>
<td align="right"><span style="font-size:12px; font-family:verdana,
arial, helvetica"><b>Fahrenheit</b></span></td>
</tr>
<tr>
<td align="left">
<p> <input type="text" size="6" id="celsius" value="00"
onChange="celsconv()" onClick="this.select()" ></p>
</td>
<td align="right">
<p><input type="text" size="6" id="fahreneit" value="00" onChange="fahrconv()"
onClick="this.select()" ></p>
</td>
</tr>
</table>
</form>
Notiamo in questo caso l'uso di due diversi gestori di eventi:
- onChange: invocato quando il contenuto di una casella di
testo viene modificato;
- onClick: si attiva quando si clicca su una casella di
testo;
Le corrispondenti funzioni associate agli eventi precedenti sono le
seguenti:
<script>
function celsconv()
{
document.getElementById("fahreneit").value = Math.round(((document.getElementById("celsius").value)
* 9/5 + 32) * 10) / 10;
}
function fahrconv()
{
document.getElementById("celsius").value = Math.round(((((document.getElementById("fahreneit").value)-
32) * 5)/9) * 10) / 10;
}
</script>
La funzione celsconv viene attivata (in termine tecnico si dice
chiamata) quando viene modificato il contenuto della casella di
testo celsius, contenente la temperatura in gradi celsius (evento
onChange). In modo perfettamente simmetrico fahrconv viene chiamata
quando viene modificato il contenuto della casella di testo fahreneit,
contenente la temperatura in gradi fahreneit. Si noti che l'evento onChange
viene "registrato" da JS solo quando si abbandona la casella (facendo click
per esempio da qualche altra parte).
Gestori di eventi
L'elenco dei gestori di eventi disponibili è vasto. Vediamo i principali
(un
elenco più esaustivo può essere trovato su W3school):
- onClick: attivato quando si clicca su un oggetto;
- onDblClick: attivato con un doppio click;
- onMouseDown: attivato quando si schiaccia il tasto sinistro del mouse;
- onMouseUp: attivato quando si alza il tasto sinistro del mouse precedentemente schiacciato;
- onMouseOver: attivato quando il mouse si muove su un oggetto;
- onMouseOut: attivato quando il mouse si sposta da un oggetto;
- onDragDrop: evento attivato quando un utente trascina un oggetto sulla finestra del browser o quando rilascia un file sulla stessa;
- onMove: attivato quando un oggetto muove una finestra o un frame;
- onDragStart: evento attivato appena l'utente inizia a trascinare un oggetto;
- onDrag: attivato quando il mouse trascina un oggetto o una selezione di testo nella finestra dello stesso browser o anche di un altro o anche sul Desktop;
- onDragEnter: attivato appena l'utente trascina un oggetto su un obiettivo valido dello stesso o di un altro browser;
- onDragOver: attivato quando l'utente trascina un oggetto su un obiettivo valido ad ospitarlo, ed è simile all'evento precedente, ma viene attivato dopo quello;
- onDragLeave: attivato quando l'utente trascina un oggetto su un obiettivo adatto per ospitarlo, ma non vi viene rilasciato;
- onDragEnd: attivato quando l'utente rilascia l'oggetto al termine del trascinamento.
- onDrop: attivato quando il mouse si alza il tasto del mouse in seguito ad un'operazione di trascinamento;
- onKeyPress: evento attivato quando un utente preme e rilascia un tasto o anche quando lo tiene premuto;
- onKeyDown: attivato quando viene premuto il tasto;
- onKeyUp: evento attivato quando un tasto, che era stato premuto, viene rilasciato;
- onHelp: attivato quando un utente preme il tasto F1;
- onChange: attivato quando il contenuto di un campo di un form o modulo è modificato;
- onPropertyChange: attivato quando cambia la proprietà di un elemento;
- onFocus: attivato quando un elemento si attiva (riceve il focus);
- onBlur: è l'opposto di onFocus - si attiva quando un elemento perde il focus
- onSelect: attivato quando si seleziona del testo all'interno di una casella di testo;
- onLoad: attivato al caricamento di un elemento sulla pagina;
- onUnload: contrario del precedente, è attivato quando un elemento viene scaricato;
- onResize: si attiva quando l'utente rimpicciolisce o ingrandisce una finestra o un frame;
- onScroll: attivato quando si effettua lo scrolling della pagina;
- onSubmit: attivato dal click su tasto di Invio di un form;
- onReset: attivato dal click su tasto di Annulla di un form.
Alcuni di questi gestori di eventi sono universali, nel senso che possono essere applicati praticamente a qualsiasi elemento di una pagina; altri invece sono specifici di un certo elemento.
precedente -
successiva
Sito realizzato in base al template offerto da
http://www.graphixmania.it