Cours de JavaScript > Les événements [ L'éditeur JavaScript ]

Fermer

Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?

new!

> Les événements

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="#" onClick="window.alert('Message d\'alerte a utiliser avec moderation');return(false)">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 "#" 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!).

Script:

<html>
<head>
<title>Modification d'une image lors du passage de la souris</head>
</head>
<body>

<a href="#" 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

Aperçu de l'effet du script:

Cours de JavaScript en partenariat avec CommentCaMarche.net
N'hésitez pas à visiter cet excellent site contenant des cours sur presque tous les langages de programmation !

Annotations des visiteurs :

De mandalor - le 29-08-2004

Je tiens a dire que dans le code de l'exemple du "ouverture d'une boite de dialogue avec un clik", on a deux fois le tag </head>
il faut remplacer le premier </head> par un </title> qui lui n'a pas ete ferme
De artotal - le 24-02-2005

Je réclame + de précision sur les exemples d'évenement
onclick me pose un probleme

<a href="#" onClick="window.alert('Message d\'alerte a utiliser avec moderation');return(false)">Cliquez ici!</a>

return(false)
Je comprend pas se qu'il fait là ? ¿

la meme chose pour le rolloverc'est pas très clair "pour moi "
Bien ami(calm]ent
De database - le 07-03-2005

une application intéressante est également le remplacement d'une image par une autre sur un click. "divers2.gif" se change en "divers.gif".

<html>
<a href="#"
onClick="a8.src='.../divers.gif'">
<img name="a8" src=".../divers2.gif"></a>
</html>
De 8livier - le 10-05-2005

bonjour,

une petite question a propos de onclick et le php,
en effet, comment faire pour que :

echo "<a href=\"#\" onClick=\"image.src='".$photo['chemin']."'\"><img src=\"".$photo['chemin']."\" width='50' height='50' border='0'></a>";

puisse fonctionner?
De Ouroboros - le 18-11-2005

en fait les codes du type:
<A HREF="lien">blablabla</A> sont de l'html, et non du php, donc pour que ce que tu as écrit marche ferme la balise php , puis tape ton lien ( sans point virgule à la fin) puis rouvre une balise php si tu a autre chose à mettre après :)

ça donne qqch du style:

...
?>
<A HREF="ton_lien"><IMG SRC="ton_image"></A>
<?
...

Voilà voilà :)
De gerfo44 - le 03-12-2005

Excellent ce tutoriel !
Je ferai la même remarque que Artotal en 02/05 :
- pb du return(false) : pas compris
- onMouseOut : pas clair
Où se trouve la réponse ?

Bon ok, j'apprends et je suis un vrai débutant ;)
De azrael - le 08-01-2006

le php génère de l'html, c'est pas de l'html mais ça en produit.
essayé de regarder les sources d'un page en php, tu ne verra que de l'html et éventuellement du javascript

pour générer ce bout essaye en le découpant un peu ^^

De newdatabase - le 17-04-2006

pour répondre à 8livier, dans ton cas il est inutile, du moins, je pense, de mettre toutes ces interprètations javascript. l'html le lira très bien ex:
<code>
<a href="#" onClick="window.open('http://www.nom/emplacement.htm')"><imgsrc="http://www.nom/emplacement.jpg"; alt="ca doit marcher" width='50' height='50' border='0'>clique ici</a>
a+
</code>
De momade - le 25-12-2006

Bonjour, j'ai un soucis j'ai inséré vos bout de code mes je ne c pas ce qu'il va pas voici mon bout de code

<a href="'.$reponse['photo'].'"> <img src="'.$reponse['photo'].'"BORDER=0 widht="100px" height="100px" />

je ne sais pas comment faire pour voir l'image en grand dans une autre page j'espere que vous pourriez m'aidé merci beaucoup
De momade - le 25-12-2006

Bonjour comme 8livier j'ai ce pb voici mon bout de code en esperent que quelqu'un puisse m'aidé

<a href="'.$reponse['photo'].'"> <img src="'.$reponse['photo'].'"BORDER=0 widht="100px" height="100px" />

merci beaucoup pour votre aide
De Daddy Cool78 - le 12-01-2007

Réponse pour Artotal et Gerfo44:
--> return(false) <-- fait que la commande est désamorcée, ici le navigateur ne suivra pas le lien (#)
Sans cela, vous seriez redirigé sur le lien http://# , pas vraiment utile pour la cause ;)
De alexandre75 - le 31-07-2007

Pour répondre à la question :

echo "<a href=\"#\" onClick=\"image.src='".$photo['chemin']."'\"><img src=\"".$photo['chemin']."\" width='50' height='50' border='0'></a>";

il manque un nom à ton image, donc image.src est une zone inconnue ...

La solution :

echo "<a href=\"#\" onClick=\"image.src='".$photo['chemin']."'\"><img src=\"".$photo['chemin']."\" width='50' height='50' border='0' name='image'></a>";

a plus

>> Poster une annotation sur ce cours

Les autres cours :

|< Les chaines de caractères Les opérateurs >|

27 visiteurs
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Cegetel
Fournisseur d'acces ADSL
http://www.cegetel.fr/

Cat : Haut débit
Voir l'annuaire webmaster

LES SCRIPTS :

78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

LES MEMBRES :

54728 membres
8702 comptes CountUs
1446 comptes myCircle

LES FORUMS :

14 forums
39151 topics
188601 messages
>> Les forums

SONDAGE

La mini-astuce "PHP / mySQL" du jour par @Rano
Lorsque vous voulez faire une recherche sur les fonctions PHP, allez simplement à l'url :
http://fr.php.net/fonction_que_vous_cherchez (par exemple http://fr.php.net/mail)
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi