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();"

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

 

Objets auxquels on peut associer des événements

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

 

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 boite 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 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:

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

Script:
 
<html>
<head>
<title>Modification d'une image lors du passage de la souris</head>
</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:

Aperçu de l'effet du script:

 


 

 

 

 











Ajouter aux Favoris Ajouter aux votre page
 

 


Acceuil | Forum| Contactez-Nous | Annace |Chat| Music |Radios|Sockets |Protocoles|Windows NT
Langage C |Langage C++ | Assembleur | Java | Perl |Pascal/delphi | Visual basic|MERISE | SQL| JDBC| ODBC
ASP|CGI |HTML |DHTML |XML|Javascript |JSP |PHP|Servlets |VBScript |WAP |UNIX |Linux |MacOS|Windows 9x
Assemblage-PC |Modèle relationnel|Histoire-PC|Fonctionnement-PC|photo pour rire|MS-Dos|Architecture-PC
Flash MX |Word-2003|Power Point|Excel|Langage C|Langage Java|Visual Basic|La base XP | programming
Physique Arabic partie I|Programation en arabe|Physique Français|Internet| Sécurité Informatique
HTML |Agebre en Français|Math Français partie I|Physique Arabic partie II| الطرق العددية
Electricité| Math Français partie II|Math en Arabic|Agebre en Arabic| الأعداد العقدية
Tous les cours informatiques en vidéos |Droit Informatique |logiciels
Tous les cours physiques en vidéos |Microsoft office
Cours math en vidéos | Msn en ligne
TV Live


Autoformations les cours informatiques en vidéos gratuitement
:: Copyright © 2008 http://www.autoformations.co.cc All rights reserved ::