| ||||||||||||||||
 Tutorials Eventi |
In questo tutorials diamo una panoramica dei principali "event-handler" e del loro utilizzo.
| Event-handler | Generato da: | Supportato da: |
| onAbort | Caricamento interrotto | Image |
| ontblur | L'elemento perde il focus di input | Elementi di testo, window ,tutti gli elementi |
| onClick | L'utente fa click con il mouse | Link, elementi |
| onDblClick | L'utente fa doppio click | document,Link,Image,elementi |
| onError | Si verifica un'errore durante il caricamento | Image |
| onFocus | All'elemento viene assegnato il focus di input | window,tutti gli elementi modulo |
| onKeyDown | L'utente preme un tasto | document,Image,Link,elementi di testo |
| onKeyPress | L'utente preme un tasto | document,Image,Link,elementi di testo |
| onKeyUp | L'utente rilascia un tasto | document,Image,Link,elementi di testo |
| onLoad | Termina il caricamento del documento o immagine | window,Image |
| onMouseDown | L'utente preme il tasto del mouse | document,Image,Link,pulsanti |
| onMouseOut | Il mouse viene spostato dall'elemento | Link,Image,Layer |
| onMouseOver | Il mouse si porta sopra l'elemento | Link,Image,Layer |
| onMouseUp | L'utente rilascia il pulsante del mouse | document,Image,Link,pulsanti |
| onReset | L'utente chiede di reimpostare il modulo | form |
| onResize | La finestra viene ridimensionata | window |
| onSubmit | L'utente chide l'invio dei dati | form |
| onUnLoad | Il documento viene scaricato | window |
|
Vediamo ora un'esempio di utilizzo per ognuno degli event-handler citati: Inseriamo un'immagine nel nostro documento ed associamo l'evento onAbort , in questo modo saremo avvertiti se il caricamento della stessa sarā interrotto: <img src="images/tua.gif" onAbort="alert('Caricamento interrotto!')"> Inseriamo un'altra immagine ed associamo l'evento onError in questo modo se ci sarā un'errore durante il caricamento saremo avvisati: <img border="0" src="images/tua2.gif" onError="alert('Errore di Caricamento!')"> Supponiamo di voler dare il focus ad un campo di testo(T1) al termine del caricamento del documento , utilizziamo l'evento onLoad nel body: <body onLoad="self.document.forms[0].T1.focus()"> Supponiamo di voler essere avvisati se il campo testo T1 perde il focus, utilizziamo l'evento onBlur: <input type="text" name="T1" onBlur="alert('Il campo testo non ha pių il focus!')"> Catturiamo l'evento onClick su un pulsante: <input type="button" name="B3" onClick="alert('mi hai cliccato!!')"> Catturiamo l'evento doppio bClick onDblClick su un pulsante: <input type="button" name="B4" onDblClick="alert('Hai fatto doppio click!')"> Supponiamo di voler essere avvisati quando il campo testo T1 si riprende il focus, utilizziamo l'evento onFocus: <input type="text" name="T1" onFocus="alert('Il campo testo ha il focus!')"> Verifichiamo quando un tasto della tastiera viene premuto con onKeyDown: <body onKeyDown="alert('hai premuto un tasto!')"> Verifichiamo quando un tasto della tastiera viene rilasciato con onKeyUp: <body onKeyUp="alert('hai rilasciato un tasto!')"> Verifichiamo ora quando un'utente preme un tasto del mouse con onMouseDown: <input type="button" value="Premi mouse" name="B6" onMouseDown="alert('hai premuto un tasto del mouse!')"> Verifichiamo ora quando un'utente rilascia un tasto del mouse con onMouseUp: <input type="button" value="Premi mouse" name="B7" onMouseUp="alert('hai rilasciato un tasto del mouse!')"> Verifichiamo ora quando un'utente passa sopra un campo testo con il puntatore del mouse onMouseOver: <input type="text" name="T2" onMouseOver="alert('sei sopra!')"> Verifichiamo ora quando un'utente si sposta da un campo testo con il puntatore sel mouse onMouseOut: <input type="text" name="T3" size="20" value="togli puntatore" onMouseOut="alert('sei fuori!')"> Verifichiamo quando l'utente preme il pulsante reset del form con onReset: <form method="POST" onReset="alert('hai resettato!')"> Verifichiamo quando l'utente invia il modulo con onSubmit: <form method="POST" onSubmit="alert('hai inviato form!')"> Supponiamo di voler essere avvisati quando l'utente ricarica o chiude il documento, utilizziamo l'evento onUnLoad: <body onUnLoad="alert('Ciao!')"> Naturalmente gli "alert" di questi esempi potranno essere sostituiti anche con nomi di funzioni che potranno essere in questo modo richiamate. Pagina d'esempio completa:
<html>
<head>
<title>test</title>
</head>
<body onLoad="self.document.forms[0].T1.focus()" onKeyDown="alert('hai premuto un tasto!')"
onResize="alert('hai ridimensionato!')" onUnLoad="alert('Ciao!')">
<p><img border="0" src="images/tua.gif" width="140" height="40" onAbort="alert('Caricamento interrotto!')"><br>
<img border="0" src="images/tua2.gif" width="140" height="40" onError="alert('Errore di Caricamento!')"><br>
</p>
<form method="POST" onReset="alert('hai resettato!')" onSubmit="alert('hai inviato form!')">
<p><input type="text" name="T1" size="20" value="pippo" onBlur="alert('Il campo testo non ha pių il focus!')"
onFocus="alert('text ha il focus!!')"><br>
<input type="reset" value="togli focus" name="B2"><br>
<input type="button" value="click" name="B3" onClick="alert('mi hai cliccato!!')"><br>
<input type="button" value="doppioclick" name="B4" onDblClick="alert('Hai fatto doppio click!')"><br>
<input type="button" value="Text focus" name="B5" onClick="self.document.forms[0].T1.focus()"><br>
<input type="button" value="Premi mouse" name="B6" onMouseDown="alert('hai premuto un tasto del mouse!')"><br>
<input type="button" value="Rilascia Mouse" name="B7" onMouseUp="alert('hai rilasciato un tasto del mouse!')"><br>
<input type="text" name="T2" size="20" value="metti puntatore" onMouseOver="alert('sei sopra!')"><br>
<input type="text" name="T3" size="20" value="togli puntatore" onMouseOut="alert('sei fuori!')"><br>
<input type="reset" value="Reimposta" name="B8" ><br>
<input type="submit" value="Invia" name="B9"></p>
</form>
</body>
</html>
| ||
| Per navigare correttamente il sito è necessario abilitare i cookies. |
| Enjoy Open Source! |
Segnala 
Preferiti 
