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.
<body onload="maFonction()">
<input type="button" onclick="maFonction()">PseudoURL :
Les pseudos-URL sont insérées dans les balises de lien avec la syntaxe suivante :
<a href="javascript:alert('Coucou !!')">Mon Lien</a>et ce pour faire la distinction avec un lien vers une autre page :
<a href="maPage.htm">Mon Lien</a> Voir à ce sujet
Exemples d'événements :
Testez sur série d'événements sur des objets de votre navigateurTests d'événements
| 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 <input 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.
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function position(ev)
{
var Xfen, Xdoc, Yfen, Ydoc, el;
Xfen = ev.clientX;
Xdoc = Xfen + document.body.scrollLeft;
Yfen = ev.clientY;
Ydoc = Yfen + document.body.scrollTop;
el = document.getElementById("idMouse");
el.innerHTML = " Xdoc= "+Xdoc+" px ; Ydoc= "+Ydoc+" px<br>";
el.innerHTML+= " Xfen= "+Xfen+" px ; Yfen= "+Yfen+" px";
}
//-->
</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.