11 juin 2010

Introduction à JavaScript: Cours N° 03

12:18 Java Script , 0 Comments
III. Evénements


III. Evénements

Tous les événements commencent par on : onclick, onload, onmouseout, onmouseover.... Ils peuvent être insérés dans les balises HTML du document. Il est vivement conseillé de les écrire en minuscules.
Syntaxe des événements

<body onload="maFonction()">
<input type="button" onclick="maFonction()">
Pseudo-URL :
Les pseudos-URL sont insérées dans les balises de lien avec la syntaxe suivante :
Pseudo-URL

<a href="javascript:alert('Coucou !!')">Mon Lien</a>
et ce pour faire la distinction avec un lien vers une autre page :
URL

<a href="maPage.htm">Mon Lien</a>
 

src Testez sur série d'événements sur des objets de votre navigateur

Evénement Survient Commentaires
onload après le chargement de la page  
onunload lors de la fermeture de la page  
onbeforeunload juste avant la fermeture de la fenêtre  
onclick lors d'un clic l'événement survient lors d'un clic sur le bouton gauche
ondblclick lors d'un double-clic double-clic sur le bouton gauche
onmousedown quand on enfonce le bouton de la souris cet événement survient sur un clic gauche ou un clic droit
onmouseup quand on relâche le bouton de la souris cet événement survient sur un clic gauche ou un clic droit
onmousemove lorsque la souris se déplace dans un objet du document  
onkeydown quand on enfonce une touche du clavier  
onkeyup quand on relâche la touche  
onkeypressed quand on enfonce une touche du clavier Firefox et IE5 sous Windows : équivalent à onkeydown()
onblur quand l'élément perd le focus IE5 sous Windows : l'événement survient lorsque l'élément perd le focus.
Firefox sous Windows : l'événement survient juste avant que l'élément ne perde le focus.
onfocus quand l'élément a le focus Cas de l'input de type file .
IE5 sous Windows : l'événement se produit lors du clic dans la boîte de texte ou après avoir cliqué sur « Ok » ou « Annuler » de la boîte de dialogue « Choisir fichier ». Pas d'événement lors du clic sur le bouton « Parcourir ».
Firefox sous Windows : l'événement se produit uniquement lors du clic sur le bouton « Parcourir ».
onchange quand l'élément perd le focus et que son contenu a changé  
onsubmit juste avant l'envoi d'un formulaire  
onreset lors de la réinitialisation du formulaire  
onselect quand le contenu d'un élément est sélectionné Firefox sous Windows : onselect n'est valide que pour les input de type texte (text, password, file et textarea).
Le nombre d'appels à cet événement va dépendre de la manière dont est faite la sélection (clavier, double-clic...) et du navigateur. On ne peut pas donc se fier à cette indication pour déterminer le nombre de caractères ou de mots sélectionnés.
onscroll lors de l'utilisation de la barre de défilement Firefox sous Windows : l'événement onscroll ne fonctionne pas sur les balises textarea.
onbeforeprint avant l'impression (après le clic sur le bouton Ok de la fenêtre d'impression) Cet événement ne fonctionne que sous Internet Explorer.
onafterprint après l'impression Cet événement ne fonctionne que sous Internet Explorer.
oncopy lors du copier vers le presse-papier Cet événement survient lors d'un "CTRL+C" ou d'un copier via le menu contextuel.
onpaste lors du coller depuis le presse-papier Cet événement survient lors d'un "CTRL+V" ou d'un coller via le menu contextuel.
 

Il arrive souvent que l'un des arguments de la fonction appelée lors d'un événement soit l'objet event (gestionnaire des événements). Le cas le plus classique est lorsque l'on veut connaître la position de la souris.
Avec Internet Explorer, l'objet event est contenu dans l'objet window : window.event. Avec Firefox ou Netscape, l'objet event est généré lors d'un événement (onclick par exemple) à la seule condition que celui-ci soit inclus dans la balise HTML. Par conséquent, pour récupérer l'événement produit, il faut que l'objet event soit un paramètre de la fonction.

 
Récupération de l'évènement produit dans la page Web

<html>
 <head>
 <title></title>

 <script type="text/javascript">
 
 </script>
</head>

<body onmousemove="position(event)">
 <div id="idMouse">
 </div>
</body>

</html>
Cependant, (et c'est un gros avantage) ce code fonctionne également sous Internet Explorer. Il n'est donc pas nécessaire d'ajouter des tests pour savoir s'il faut utiliser le paramètre ev de la fonction ou le gestionnaire d'événements window.event que seul IE comprend.
By Price:
Product Tags:

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)