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();"
Lorsqu'il est utilisé dans un lien hypertexte, par exemple, la syntaxe sera la suivante :
<A href="onEvenement='Action_Javascript_ou_Fonction();'>Lien</a>
Les gestionnaires d'événements sont associés à des objets, et leur code s'insèrent
dans la balise de ceux-ci...
Chaque événement ne peut pas être associé à n'importe quel
objet. Il est évident par exemple qu'un événement OnChange ne pourra pas s'appliquer
à un lien hypertexte. Voici un tableau récapitulant les objets auxquels peuvent
être associés chaque événement :
| Evénements |
Objets concernés |
| abort |
Image |
| blur |
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window |
| change |
FileUpload, Select, Submit, Text, TextArea |
| click |
Button, document, Checkbox, Link, Radio, Reset, Select, Submit |
| dblclick |
document, Link |
| dragdrop |
window |
| error |
Image, window |
| focus |
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window |
| keydown |
document, Image, Link, TextArea |
| keypress |
document, Image, Link, TextArea |
| keyup |
document, Image, Link, TextArea |
| load |
Image, Layer, window |
| mousedown |
Button, document, Link |
| mousemove |
Aucun spécifiquement |
| mouseout |
Layer, Link |
| mouseover |
Area, Layer, Link |
| mouseup |
Button, document, Link |
| move |
window |
| reset |
form |
| resize |
window |
| select |
text, Textarea |
| submit |
Form |
| unload |
window |
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 boîte de dialogue lors d'un click</title>
</head>
<body>
<a href="javascript:;"
onClick="window.alert('Message d\'alerte à 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!). Ce type d'effet est appelé rollover.
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é aux navigateurs supportant
javascript 1.1 et supérieur
Aperçu de l'effet du script:
|
