Les événements
Afin de fournir plus d'interactivité entre l'utilisateur et le
navigateur, il existe une série d'événements.
Ils permettront de fournir un traitement approprié en fonction
du choix de l'utilisateur.
En voici un exemple
simple.
Voici un tableau avec la liste des événements :
| Evénements |
Origine |
| onBlur |
Se produit lorsqu'un champs d'un formulaire perd le focus |
| onClick |
Se produit lorsque l'utilisateur clique avec la souris
sur un objet |
| onChange |
Se produit lorsqu'on change le contenu d'un objet d'un
formulaire et qu'on quitte cet objet |
| onFocus |
Se produit lorsqu'un champs d'un formulaire prend le focus |
| onLoad |
Se poduit lors du chargement de la page HTML |
| onMouseOut |
Se produit lorsque le curseur de la souris quitte un objet |
| onMouseOver |
Se produit lorsque le curseur de la souris survole un objet |
| onSelect |
Se produit lorsqu'on sélectionne du texte dans un
champs de type "text" ou "textarea" |
| onSubmit |
Se produit lorsqu'un formulaire est envoyé |
| onUnload |
Se produit lorsqu'on quitte la page HTML |
Exemple :
Dans cet exemple, j'ai mis les événement
-
onMouseOver, onMouseOut et onClick sur l'image
-
onFocus, onBlur, onSelect et onChange sur le champs "Sélectionnez-moi".
Vous pourez ainsi vous rendre compte de l'ordre des événements.
-
onClick sur le bouton "reset"
-
onSubmit sur le formulaire
<form
onSubmit="alert('Evénement
onSubmit');return false;">
<p>
<img src="../images/lamp.gif"
width="16" height="16"
alt="événement
onMouseOver et onMouseOut" onMouseOver="alert('Evénement
onMouseOver')" onMouseOut="alert('Evénement
onMouseOut')" onClick="alert('Evénement onClick')">
<input type="text"
name="T1" value="Sélectionnez-moi" size="20" onFocus="alert('Evénement
onFocus')" onBlur="alert('Evénement
onBlur')" onChange="alert('Evénement
onChange')" onSelect="alert('Evénement
onSelect')">
<input type="submit"
value="Submit" name="B1">
<input type="reset"
value="Reset" name="B2" onClick="alert('Evénement
onCLick')">
</p>
</form> |
Il est conseillé de mettre les traitements sur les événements
dans fonctions entre les tags <script> et </script> et de faire appel
à ces fonctions lors de l'événement. Ceci afin de
faciliter la mise à jour et la lisibilité des sources.
