 |
Généralités
Avec les événements et surtout leur
gestion, nous abordons le côté "magique"
de Javascript.
En Html classique, il y a un événement que vous connaissez
bien. C'est le clic de la souris sur un lien pour vous transporter sur
une autre page Web. Hélas, c'est à peu près le seul.
Heureusement, Javascript va en ajouter une bonne dizaine, pour votre plus
grand plaisir.
Les événements Javascript, associés
aux fonctions, aux méthodes et aux formulaires, ouvrent grand la
porte pour une réelle interactivité
de vos pages.
|
|
Les événements
Passons en revue différents événements
implémentés en Javascript.
| Description |
Evénement |
| Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément. |
Clik |
| Lorsque la page est chargée par le browser ou le navigateur. |
Load |
| Lorsque l'utilisateur quitte la page. |
Unload |
| Lorsque l'utilisateur place le pointeur de la souris sur un lien ou
tout autre élément. |
MouseOver |
Lorsque le pointeur de la souris quitte un lien ou tout autre élément.
Attention : Javascript 1.1 (donc pas sous MSIE 3.0
et Netscape 2) |
MouseOut |
| Lorsque un élément de formulaire a le focus c-à-d
devient la zone d'entrée active. |
Focus |
| Lorsque un élément de formulaire perd le focus c-à-d
que l'utilisateur clique hors du champs et que la zone d'entrée
n'est plus active. |
Blur |
| Lorsque la valeur d'un champ de formulaire est modifiée. |
Change |
| Lorsque l'utilisateur sélectionne un champ dans un élément
de formulaire. |
Select |
| Lorsque l'utilisateur clique sur le bouton Submit pour envoyer
un formulaire |
Submit |
|
|
Les gestionnaires d'événements
Pour être efficace, il faut qu'à
ces événements soient associées les actions prévues
par vous. C'est le rôle des gestionnaires d'événements.
La syntaxe est
onévénement="fonction()"
Par exemple, onClick="alert('Vous
avez cliqué sur cet élément')".
De façon littéraire, au clic de l'utilisateur, ouvrir une
boite d'alerte avec le message indiqué.
|
|
onclick
Evénement classique en informatique, le
clic de la souris.
Le code de ceci est :
<FORM>
<INPUT TYPE="button" VALUE="Cliquez ici"
onClick="alert('Vous avez bien cliqué
ici')">
</FORM>
Nous reviendrons en détail sur les formulaires dans le chapitre
suivant.
|
|
onLoad et onUnload
L'événement Load survient lorsque
la page a fini de se charger. A l'inverse, Unload survient lorsque l'utilisateur
quitte la page.
Les événements onLoad et onUnload sont utilisés
sous forme d'attributs de la balise <BODY> ou
<FRAMESET>. On peut ainsi écrire un script
pour souhaiter la bienvenue à l'ouverture d'une page et un petit
mot d'au revoir au moment de quitter celle-ci.
<HTML>
<HEAD>
<SCRIPT LANGUAGE='Javascript'>
function bienvenue() {
alert("Bienvenue à cette page");
}
function au_revoir() {
alert("Au revoir");
}
</SCRIPT>
</HEAD>
<BODY onLoad='bienvenue()'
onUnload='au_revoir()'>
Html normal
</BODY>
</HTML>
|
|
onmouseOver et onmouseOut
L'événement onmouseOver se produit
lorsque le pointeur de la souris passe au dessus (sans cliquer) d'un lien
ou d'une image. Cet événement est fort pratique pour, par
exemple, afficher des explications soit dans la barre de statut soit avec
une petite fenêtre genre infobulle.
A titre d'illustration, passez avec le pointeur de la souris sur le
mot voyelles (sans cliquer sur le lien).
Voyelles
L'événement onmouseOut, généralement associé
à un onmouseOver, se produit lorsque le pointeur quitte la zone
sensible (lien ou image).
Notons qui si onmouseOver est du Javascript 1.0, onmouseOut est du Javascript
1.1.
En clair, onmouseOut ne fonctionne pas avec Netscape
2.0 et Explorer 3.0.
Nous parlons plus longuement de onmouseOver er de onmouseOut dans le
chapitre "Les événements -- Avancé --".
|
|
onFocus
L'événement onFocus survient lorsqu'un champ de saisie
a le focus c.-à-d. quand son emplacement est prêt à
recevoir ce que l'utilisateur à l'intention de taper au clavier.
C'est souvent la conséquence d'un clic de souris ou de l'usage de
la touche "Tab".
Si vous cliquez dans la zone de texte, vous effectuez un focus
|
|
onBlur
L'événement onBlur a lieu lorsqu'un champ de formulaire
perd le focus. Cela se produit quand l'utilisateur ayant terminé
la saisie qu'il effectuait dans une case, clique en dehors du champ ou
utilise la touche "Tab" pour passer à un champ. Cet événement
sera souvent utilisé pour vérifier la saisie d'un formulaire.
Si après avoir cliqué et/ou écrit dans la
zone de texte, vous cliquez ailleurs dans le document, vous produisez un
événement Blur.
Le code est :
<FORM>
<INPUT TYPE=text onBlur="alert('Ceci
est un Blur')">
</FORM>
|
|
onchange
Cet événement s'apparente à l'événement
onBlur mais avec une petite différence. Non seulement la case du
formulaire doit avoir perdu le focus mais aussi son contenu doit avoir
été modifié par l'utilisateur.
|
|
onselect
Cet événement se produit lorsque l'utilisateur a sélectionné
(mis en surbrillance ou en vidéo inverse) tout ou partie d'une zone
de texte dans une zone de type text ou textarea.
|
|
Suite
Il ne faut cependant pas utiliser les gestionnaires
d'événement à tort et à travers. En Javascript,
chaque objet supporte un ou plusieurs événements bien déterminés.
Nous vous invitons à découvrir cette liste dans la partie
avancée.
|
