click del mouse

• onClick="..." attivato quando si clicca su un oggetto

esempio:
<a onclick="alert('ciao')" href="pagina.html>
<a onclick="funzione()" href="pagina.html>


• 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
• onContextMenu="..." attivato quando si clicca il tasto destro del mouse aprendo il ContextMenu

Valore true o false
onClick / onMouseDown / onMouseUp / onContextMenu danno la possibiltà anche di ricevere un valore true o false.

esempio: chiedere se attivare o meno un link
<a href="XXXX.htm" onclick="return(confirm('Sei sicuro'))">
se non si conferma non si esegue il link (vedi return e confirm)

movimento del mouse

• onMouseOver="..." attivato quando il mouse si muove su un oggetto;
esempio:
<a onmouseover="alert('ciao');" href="pagina.html>


• onMouseOut="..." attivato quando il mouse si sposta fuori da un oggetto;
esempio:
<a onmouseout="alert('ciao');" href="pagina.html>


• onMouseMove="..." si muove il puntatore del mouse, ma poiché questo evento ricorre spesso (l'utilizzo del mouse é frequente), non é disponibile per default, ma solo abbinato con la cattura degli eventi

esempio: effetto RollOver
cambio immagine al passaggio sull'immagine
<img src="logo.png" width="100px" onmouseover="this.src='logo2.png'" onmouseout="this.scr='logo.png'" alt="rollover">

cambio immagine al passaggio sul link
<a href="XXXX" onMouseOver="document.images[xxx].src='immagine.gif'" onMouseOut=document.images[num].src='immagine1.gif'">

esempio: cambio stile al passaggio del mouse sul link
<p onMouseOver="this.style.color='#FF0000'">Ciao!!!</>

trascinamento del mouse

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

tasti particolari

• onSubmit attivato dal click su tasto di Invio di un form (o invio da tastiera)

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

esempio: controllo corretetzza dati prima dell'invio
<script type="text/javascript">

function valida()
{

eta=dati.eta.value;
email=dati.email.value; prendo i valori dei campi, abbreviandone i nomi

if (isNaN(eta))
{

alert ("Inserisci un'età valida");
return false; l'istruzione return interrompe la funzione e restituisce false
}



if (email.indexOf("@")==-1)
{

alert ("Inserisci un'email valida");
return false;

}

}

</script>


<form name="dati" action="http://www.html.it" onSubmit="return valida();"> usata l'istruzione return per analizzare il risultato della funzione

La tua età: <input type="text" name="eta">
La tua e-mail: <input type="text" name="email">
<input type="submit" value="invia">

</form>



• onReset attivato dal click su tasto di Annulla di un form