suivant: Capture d'événements monter: Introduction à JavaScript précédent: L'objet FORM Table des matières
Gestionnaire d'événements
JavaScript est capable d'intercepter un certain nombre d'événements afin de programmer la réaction du navigateur face aux actions de l'utilisateur. Les principales actions sont classifiées en événements et chaque objet du navigateur est sensible à certains d'entre eux. Chaque balise possède ainsi un certain nombre de nouveaux attributs associés à des événements, attributs auxquels on peut associer une suite d'instructions JavaScript à exécuter: <BALISE événement="code JavaScript">. La liste non-exhaustive des nouveaux attributs est la suivante:- - onAbort: déclenché lorsque l'utilisateur interrompt le chargement d'une image,
- - onClick: déclenché lorsque l'utilisateur clique sur un objet,
- - onDblClick: déclenché lorsque l'utilisateur double-clique sur un objet,
- - onKeyDown: déclenché lorsque l'utilisateur enfonce une touche,
- - onKeyPress: déclenché lorsque l'utilisateur appuie sur une touche,
- - onKeyUp: déclenché lorsque l'utilisateur relâche une touche,
- - onLoad: déclenché lorsqu'un document ou une image est en train de se charger,
- - onMouseDown: déclenché lorsque l'utilisateur enfonce un des boutons de la souris,
- - onMouseUp: déclenché lorsque l'utilisateur relache un des boutons de la souris,
- - onMouseMove: déclenché lorsque l'utilisateur déplace la souris,
- - onMouseOut: déclenché lorsque la souris est passé sur un élément précis du document (lien, image cliquable) et qu'elle retourne sur le fond du document,
- - onMouseOver: déclenché lorque l'utilisateur passe au dessus d'un lien ou d'une carte cliquable,
- - onMove: déclenché lorsqu'une fenêtre est déplacée,
- - onResize: déclenché lorsqu'une fenêtre est redimensionnée.
Voici un tableau donnant pour quelques balises HTML, le type d'événement qu'elle prend en compte:
| <BODY > | onLoad, onMove, onResize |
| <IMG> | onAbort, onLoad |
| <A> | onClick, onDblClick, onMouseOut, onMouseOver, onMouseDown, onMouseUp |
| <INPUT TYPE=TEXT> | onKeyPress, onKeyUp, onKeyDown |
| <LAYER> | onMouseOver, onMouseOut, onLoad |
Chaque fois que survient un événement, le navigateur créé un objet de nom event contenant un certain nombre de propriétés le concernant. En voici quelques-unes:
- - layerX: position horizontale de la souris en pixels au sein du layer, ou largeur de l'objet redimensionné dans le cas d'un événement onResize,
- - layerY: position verticale de la souris en pixels au sein du layer, ou hauteur de l'objet redimensionné dans le cas d'un événement onResize,
- - pageX: position horizontale de la souris en pixels au sein de la page,
- - pageY: position verticale de la souris en pixels au sein de la page,
- - which: code ISO-Latin 1 de la touche liée à l'événement ou numéro de bouton de la souris.
Exemple 11. On voudrait pouvoir cliquer sur un lien de façon à ce que:
- - lorsque l'on clique avec le bouton gauche de la souris sur le lien, on charge le document correspondant,
- - lorsque l'on clique avec le bouton du milieu, une fenêtre d'info s'ouvre.
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.2">
function lien(bouton)
{
if (bouton == 2)
alert("Bienvenue chez les fous !");
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="http://www.univ-tln.fr" onClick="lien(event.which)">Universite de Toulon</A>
</BODY>
Cette solution n'est pas satisfaisante, en effet pour certains événements le navigateur possède déjà un comportement par défaut. Par exemple quand on clique sur un lien (événement onClick) ceci charge automatiquement la page concernée. Si on ajoute un gestionnaire d'événement à une balise qui possède déjà un comportement par défaut, le navigateur exécute d'abord le gestionnaire spécifié dans la balise puis le gestionnaire par défaut. Ainsi dans notre exemple, si on clique sur le lien avec le bouton gauche, la fonction lien s'exécute d'abord puis le document est chargé.
Sous Netscape le fait d'appuyer sur un lien avec le bouton du milieu, ouvre une nouvelle fenêtre dans laquelle le document concerné sera chargé. Ainsi dans notre exemple, si l'on clique avec le bouton du milieu, la fenêtre d'alerte s'ouvrira puis une nouvelle fenêtre de navigateur sera créée pour charger la page de l'Université (ce qui n'était pas le but recherché).
Pour empêcher le gestionnaire par défaut de se déclencher, il faut que la fonction appelée renvoie la valeur false et que dans la balise concernée, le gestionnaire d'événement soit affectée à la valeur de retour de la fonction.
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.2">
function lien(bouton)
{
if (bouton == 2)
{
alert("Bienvenue chez les fous !");
return(false);
}
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="http://www.univ-tln.fr" onClick="return(lien(event.which))">Universite de Toulon</A>
</BODY>
suivant: Capture d'événements monter: Introduction à JavaScript précédent: L'objet FORM Table des matières Pascal VERON 2000-03-28