Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 9 di 49
  • livello principiante
Indice lezioni

Gli eventi

Cosa sono e come vengono organizati gli eventi JavaScript
Cosa sono e come vengono organizati gli eventi JavaScript
Link copiato negli appunti

Oltre essere organizzato a oggetti e metodi, JavaScript sfrutta moltissimo la presenza degli eventi.

Un evento è – molto semplicemente – qualcosa che accade nel documento.

Anche nella vita quotidiana un evento è qualcosa che accade: ad esempio una tazzina di caffè che cade e si rompe. Il documento dunque è l'ambiente entro cui vengono realizzate delle "azioni", in parte dovute alla volontà dell'utente (passaggio del mouse su un link, click su qualcosa...), altre volte dovute alla situazione contingente (la pagina è stata caricata).

Grazie agli eventi possiamo "impacchettare" il codice scritto attraverso JavaScript e farlo eseguire non appena l'utente esegue una data azione: quando clicca su un bottone di un form possiamo controllare che i dati siano nel formato giusto; quando passa su un determinato link possiamo scambiare due immagini, eccetera.

Gli eventi (le possibili cose che possono capitare all'interno della pagina) sono davvero tanti e ogni nuova versione del browser si arricchisce di nuove possibilità messe a disposizione degli sviluppatori. Vediamo quali sono quegli eventi che vi capiterà più spesso di incontrare.

Come si può vedere dagli esempi il modo corretto per sfruttare gli eventi è quello di inserire l'evento all'interno della sintassi dell'elemento HTML e racchiudere il codice JavaScript tra virgolette. Secondo questo modello:

<ELEMENTO nomeEvento="codice JavaScript">

Abbiamo già incontrato in precedenza l' "alert" è una finestra di dialogo che avverte di qualcosa.

Negli esempi qui sotto, quando viene eseguita una determinata azione, viene mostrato un alert con scritto "ciao".

evento si applica a...
(elementi maggiormenti usati)
descrizione esempio
onload <body>
<img>

"sul caricamento..."

l'evento scatta quanto l'oggetto risulta completamente
caricato.

<body onload="alert('ciao');">

<img src="miaimmagine.jpg" onload="alert('ciao');">

onunload <body>

applicato al <body> si verifica quando il browser "scarica"
il documento. cioè alla chiusura del documento.

<body onunload="alert('ciao');">

onmouse
over
<a>
<area>
<input> (submit, reset,button, checkbox, radio, option)

"al passaggio del mouse".

si verifica quando l'utente passa il mouse su un'area
sensibile (link o mappa).

con ie 5+ questo evento può essere associato anche a
td, tr, etc.

<a onmouseover="alert('ciao');" href="pagina.html">

onmouse
out
<a>
<area>
<input> (vedi sopra)

"quando il mouse esce".

si verifica quando l'utente con il mouse esce al di fuori
dell'area sensibile (link o mappa).

con ie 5+ questo evento può essere associato anche a
td, tr, etc.

<a onmouseout="alert('ciao');" href="pagina.html">

onclick <a>
<area>
<input>

"sul click del mouse..."

avviene quando l'utente clicca sull'elemento

<a onclick="alert('ciao');"
href="pagina.html">

onkey
press
<a>
<area>
<input>
<div>

si verifica quando si è all'interno dell'elemento e
viene premuto un tasto della tastiera.

<textarea onkeypress="alert('ciao');">
</textarea>

onchange <input type="select">

si verifica quando l'elemento subisce un cambiamento a seguito
dell'azione dell'utente.

<select onchange="alert('ciao');">

 <option>
  uno
 </option>
 <option>
  due
 </option>
 <option>
  tre
 </option>

</select>

onsubmit <form>

quando viene eseguita l'invio del form (tramite bottone o
tramite invio da tastiera).

<form name="mioform" action="http://...." onsubmit="alert('ciao');">

onfocus <a>
<input>
<body>

"quando l'elemento ha il focus..."

entra in azione non appena l'elemento è attivo.

<body onfocus="alert('ciao');">

(provate questo esempio con altre finestre del browser aperte, e provate a passare dalla vostra pagina alle altre finestre e viceversa)

onblur <a>
<input>
<body>

"quando l'elemento non è più attivo..."

viene richiamato quando l'elemento smette di essere attivo.

<body onblur="alert('ciao');">

Un discorso a parte merita l'evento onFocus, che spesso suscita delle perplessità. "onFocus" significa "quando l'elemento è focalizzato": significa che in quel momento è attivo quel determinato elemento della pagina HTML.

Nel caso dei link e delle mappe vi potete accorgere bene di quando l'elemento ha il focus: il link o la mappa ha infatti una piccola linea tratteggiata che lo circonda (nel caso del link, se l'elemento è focalizzato, si trova nello stato "ACTIVE").

Anche nel caso delle finestre del browser è facile accorgersi di quando un elemento ha il focus: con Windows se la finestra ha il focus (basta che si trovi in primo piano) la barra in alto è azzurra (o del colore definito dall'utente), in caso contrario è grigia.

onBlursemplicemente è il contrario di onFocus: quando l'elemento che aveva il focus lo perde (perché l'attenzione dell'utente si è concentrata su altro) viene azionato l'evento onBlur.

È da notare che a uno stesso elemento possono essere attribuiti più eventi. Ad esempio:

<a onmouseover="alert('passaggio sul link');" onmouseout="alert('uscita dal link');" href="pagina.html">testo del link </a>

(Certo l'alert non è l'ideale per far interagire i tre eventi fra loro, ma l'importante è aver compreso il concetto che allo stesso elemento possono essere collegati eventi diversi, ciascuno con il proprio codice da eseguire).

Gli eventi non si esauriscono nella tabella che abbiamo appena visto. Ma quelli visti sono gli eventi più noti e più usati.

Ogni elemento dell'HTML ha a disposizione determinati eventi e non altri. Per esempio, un livello in Internet Explorer 6 è dotato di tutti i seguenti eventi (come si può vedere non c'è l'evento onLoad, né onSubmit, perché riferiti a un livello non avrebbero alcun senso):

onmouseup, oncontextmenu, onrowexit, onbeforepaste, onactivate, onmousemove, onmove, onselectstart, oncontrolselect, onkeypress, oncut, onrowenter, onmousedown, onpaste, onreadystatechange, onbeforedeactivate, onkeydown, onlosecapture, ondrag, ondragstart, oncellchange, onfilterchange, onrowsinserted, ondatasetcomplete, onmousewheel, ondragenter, onblur, onresizeend, onerrorupdate, onbeforecopy, ondblclick, onkeyup, onresizestart, onmouseover, onmouseleave, onmoveend, onresize, ondrop, onpage, onrowsdelete, onfocusout, ondatasetchanged, ondeactivate, onpropertychange, ondragover, onhelp, ondragend, onbeforeeditfocus, onfocus, onscroll, onbeforeactivate, onbeforecut, onclick, oncopy, onfocusin, onbeforeupdate, ondataavailable, onmovestart, onmouseout, onmouseenter, onlayoutcomplete, onafterupdate, ondragleave

NOTA A MARGINE

Chi volesse sapere come ho ricavato tutti gli eventi mensionati sopra, sappia che per ricavarli ho utilizzatoquesto codice JavaScript. È sufficiente inserirlo nel BODY del documento:

<div id="mioLiv" style="position:absolute"></div>

<script type="text/javascript">

for (prop in document.all.mioLiv) {
  if (prop.indexOf("on")==0)
    document.write(prop+"<br/>");
}

</script>


Ti consigliamo anche