Comment Ca Marche - Communauté informatique  
   
Accueil - Encyclopédie informatiqueTélécharger l'encyclopédieContribuer à cet article

Javascript - Les événements

Les événements en Javascript Encyclopédie


Qu'appelle-t-on un événement?

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="URL" "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...

Liste des événements

Evénement Description Test Effet
Abort
(onAbort)
Cet événement a lieu lorsque l'utilisateur interrompt le chargement de l'image    
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.
Click
(onClick)
Se produit lorsque l'utilisateur clique sur l'élément associé à l'événement. Test

dblclick
(onDblclick)
Se produit lorsque l'utilisateur double-clique sur l'élément associé à l'événement (un lien hypertexte ou un élément de formulaire). Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures Test

dragdrop
(onDragdrop)
Se produit lorsque l'utilisateur effectue un glisser-déposer sur la fenêtre du navigateur.
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures
   
error
(onError)
Se déclenche lorsqu'une erreur apparaît durant le chargement de la page.
Cet événement fait partie du Javascript 1.1.
   
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
keydown
(onKeydown)
Se produit lorsque l'utilisateur appuie sur une touche de son clavier.
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures

keypress
(onKeypress)
Se produit lorsque l'utilisateur maintient une touche de son clavier enfoncée.
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures

keyup
(onKeypress)
Se produit lorsque l'utilisateur relâche une touche de son clavier préalablement enfoncée.
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures

Load
(onLoad)
Se produit lorsque le navigateur de l'utilisateur charge 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
Reset
(onReset)
Se produit lorsque l'utilisateur efface les données d'un formulaire à l'aide du bouton Reset.
Resize
(onResize)
Se produit lorsque l'utilisateur redimensionne la fenêtre du navigateur  
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)    
Unload
(onUnload)
Se produit lorsque le navigateur de l'utilisateur quitte la page en cours    

Association des événements aux objets

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

Quelques exemples d'événements

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...).

Ouverture d'une boîte de dialogue lors d'un click

Le code correspondant à une boîte de dialogue est très simple :

window.alert("Votre Texte"); 

Il s'agit désormais de l'appeler à l'aide d'un événement dans l'attribut « href » d'un lien hypertexte :

<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!

Modification d'une image lors du survol d'un lien par le pointeur de la souris

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:

Trucs & astuces pertinents trouvés dans la base de connaissances

12/02 01h50 convertisseur d'unités de mesures scientifiques (Javascript)
19/11 00h08 Effacer un champ de formulaire lors du clic (focus) (Javascript)
18/11 00h43 JavaScript c'est la même chose que Java (Mythes et légendes)
11/11 01h39 Coloration syntaxique dans vos pages web (Webmaster)
04/11 16h32 Interdire le clic droit de la souris (Javascript)
08/11 10h32 Lien aléatoire / Choisir un lien au hasard (Javascript)
05/11 11h53 Date de dernière modification de la page (Javascript)
Javascript evenements Plus d'astuces sur « Javascript evenements »

Discussions pertinentes trouvées dans le forum

03/06 10h19 évenement javascript lien évenement javascript sur un lien Windows 04/06 14h41->nayaphykit3
12/02 14h28 javascript evenement touche entrée clavier Javascript evenement touche entrée du clavier Développement 16/02 10h45->ponpon5
02/06 21h32 evènement onclick javascript Evènement ONCLICK avec JAVASCRIPT Windows 03/06 22h36->PhP4
23/09 14h58 évenement javascript onclick formulaire évenement javascript Onclick ds formulaire Windows 23/09 16h05->alex2
22/06 09h40 évènement javascript Évènement en JavaScript Windows 22/06 14h40->asevere1
05/01 09h29 javascript evenement onclick [Javascript ] Evenement onclick Développement 05/01 09h55->StreM1
25/03 22h59 php javascript evenement onclick [php / javascript] Evenement onclick Développement 27/03 12h27->GallyNet1
21/03 11h53 javascript capturer évenement Javascript - Capturer un évenement Windows 21/03 11h53->Seb0
25/04 22h21 javascript conflit evenement [JAVASCRIPT]conflit entre evenement ??? Windows 25/04 22h21->sempire0
09/06 17h03 evenement javascript [evenement javascript] Développement 09/06 17h03->salim810
Discussion fermée Problème résolu Javascript evenements Plus de discussions sur « Javascript evenements »

Ce document intitulé « Javascript - Les événements » issu de l'encyclopédie informatique Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.