|
Les évènements sont des actions de l'utilisateur,
qui vont pouvoir donner lieu à une interactivité. L'événement par
excellence est le clic de souris, car c'est le seul que le HTML
gère. Grâce au Javascript il est possible d'associer des fonctions,
des méthodes à des événements tels que le passage de la souris
au-dessus d'une zone, le changement d'une valeur, ...
Ce sont les gestionnaires d'événements qui
permettent d'associer une action à un événement. La syntaxe d'un
gestionnaire d'événement est la suivante:
onEvenement="Action_Javascript_ou_Fonction();"
Les gestionnaires d'événements sont associés à des
objets, et leur code s'insèrent dans la balise de ceux-ci...
Evénement
(gestionnaire d'événement) |
Description |
Test |
Effet |
Click
(onClick) |
Se produit lorsque l'utilisateur
clique sur l'élément associé à l'événement |
Test |
 |
Load
(onLoad) |
Se produit lorsque le navigateur
de l'utilisateur charge la page en cours |
|
|
Unload
(onUnload) |
Se produit lorsque le navigateur
de l'utilisateur quitte la page en cours |
|
|
MouseOver
(onMouseOver) |
Se produit lorsque l'utilisateur
positionne le curseur de la souris au-dessus d'un
élément |
Test |
 |
MouseOut
(onMouseOut) |
Se produit lorsque le curseur de
la souris quitte un élément
Cet événement fait partie du Javascript
1.1 |
Test |
 |
Focus
(onFocus) |
Se produit lorsque l'utilisateur
donne le focus à un élément, c'est-à-dire que cet élément est
sélectionné comme étant l'élément actif |
|
 |
Blur
(onBlur) |
Se produit lorsque l'élément
perd le focus, c'est-à-dire que l'utilisateur clique hors de
cet élément, celui-ci n'est alors plus sélectionné comme étant
l'élément actif |
|
 |
Change
(onChange) |
Se produit lorsque l'utilisateur
modifie le contenu d'un champ de données |
|
 |
Select
(onSelect) |
Se produit lorsque l'utilisateur
sélectionne un texte (ou une partie d'un texte) dans un champ
de type "text" ou "textarea" |
|
|
Submit
(onSubmit) |
Se produit lorsque l'utilisateur
clique sur le bouton de soumission d'un formulaire (le bouton
qui permet d'envoyer le formulaire) |
|
|
Chaque événement ne peut pas être associé à
n'importe quel objet... il est évident qu'un événement
OnChange ne peut pas s'appliquer à un lien hypertexte...
| Objet
|
Evénements
associables |
| Lien hypertexte
|
onClick,
onMouseOver, onMouseOut |
| Page du
navigateur |
onLoad,
onUnload |
| Bouton, Case à
cocher, Bouton radio, Bouton Reset |
onClick |
| Liste de sélection
d'un formulaire |
onBlur, onChange,
onFocus |
| Bouton
Submit |
onSubmit |
| Champ de texte et
zone de texte |
onBlur, onChange,
onFocus, onSelect |
Le mieux pour apprendre à se servir des événements
est de s'entraîner à écrire de petits codes...
Pour vous
inspirer, pensez à regarder les fichiers sources de certaines pages
web, mais pensez toujours à respecter les auteurs des codes en ne
faisant pas un copier-coller de leurs scripts sans leur accord (il
est généralement de bon ton de citer la source du javascript que
l'on récupère...).
Le code correspondant à une boîte de dialogue est
très simple:
window.alert("Votre Texte");
Il s'agit donc de
le mettre dans la balise d'un lien hypertexte:
Script:
<html>
<head>
<title>Ouverture d'une
boite de dialogue lors d'un click</head>
</head>
<body>
<a href="javascript:;"
onClick="window.alert('Message d\'alerte a utiliser avec
moderation');">Cliquez ici!</a>
</body>
</html>
Analyse du script:
- le gestionnaire d'événement onClick a été inséré dans
la balise de lien hypertexte <A href...
- le seul but du script est de faire apparaître une boîte de
dialogue, ainsi on ne désire pas que le lien nous entraîne sur une
autre page, il faut alors insérer "javascript:;" dans l'attribut
href pour signaler au navigateur que l'on désire rester sur
la page en cours. Il ne faut pas mettre un attribut vide au risque
de révéler le contenu de votre répertoire à vos visiteurs...)
- Remarquez l'emploi de \' dans la phrase "Message
d'alerte a utiliser avec moderation"
Le signe antislash (\)
précédant le guillemet permet de signaler au navigateur qu'il ne
faut pas l'interpréter comme un délimiteur de chaîne mais comme un
simple caractère pour éviter qu'il génère une erreur!
Aperçu de l'effet du script:
Cliquez ici!
Il peut être agréable de jouer avec le gestionnaire
OnMouseOver pour créer un menu interactif qui se modifie au
passage de la souris. On peut même ajouter le gestionnaire
OnMouseOut pour rétablir l'image originale lorsque le curseur
quitte l'image (Rappel: Son utilisation est
limitée aux navigateurs supportant javascript 1.1 et
supérieur!).
Script:
<html>
<head>
<title>Modification
d'une image lors du passage de la souris</title>
</head>
<body>
<a
href="javascript:;" onMouseOver="document.img_1.src='image2.gif';"
onMouseOut="document.img_1.src='image1.gif';"> <img
name="img_1" src="image1.gif"> </a>
</body>
</html>
Analyse du script:
- Pour pouvoir associer un événement à une image il faut que
celle-ci soit considérée comme un lien, ainsi on place la balise
<img ...> entre les balises <a ...> et
</a>
- L'événement onMouseOut est limitée aux navigateurs
supportant javascript 1.1 et supérieur
© Copyright 2001 Jean-François Pillou
Ce document issu de CommentCaMarche.net est
soumis à la licence
GNU FDL. Permission vous est donnée de distribuer, modifier des
copies de cette page tant que cette note apparaît clairement.
|