6.2 Plus sur les gestionnaires d'évènements

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

Dans cette section, l'objet événement sera examiné et des événements additionnels seront décrits.

L'objet 'event'

Chaque gestionnaire d'événement dispose d'un unique argument qui contient un objet 'event'. Dans la forme avec attributs des scrutateurs d'événements, cet événement est un argument implicite auquel un script peut se référer en utilisant le nom event. Sous la forme addEventListener, le premier argument de la fonction scrutatrice sera un objet événement. L'objet event dispose d'un certain nombre de propriétés qui peuvent être examinées lors de l'émission d'un événement. La liste complète est disponible dans les références objets.

Nous avons déjà vu la propriété target d'un événement dans la section précédente. Elle contient une référence de l'élément ayant déclenché l'événement. Une propriété similaire currentTarget contient l'élément sur lequel est placé un scrutateur d'événement. Dans l'exemple ci-dessous, currentTarget pointe toujours la boîte vbox, alors que la cible peut être un élément spécifique, le bouton ou la case à cocher qui a été activé.

Exemple 6.2.1 : Source Voir

<vbox oncommand="alert(event.currentTarget.tagName);">
  <button label="OK"/>
  <checkbox label="Voir les images"/>
</vbox>

Stopper la propagation d'événement

Une fois qu'un événement est traité, indépendamment de l'étape de la propagation où se trouve l'événement, vous pouvez empêcher qu'il soit transmis aux éléments suivants, c'est-à-dire de stopper les phases de captures ou de diffusion. En fonction de la manière dont vous avez attaché le scrutateur d'événement sur un élément, il existe plusieurs méthodes pour le faire.

Rappelez-vous que la phase de capture intervient avant la phase de diffusion, donc tous les scrutateurs de capture sont déclenchés avant les scrutateurs de diffusion. Si un événement capturé stoppe la propagation événementielle, aucun des scrutateurs de capture ou de diffusion suivants ne recevront de notification d'un quelconque événement. Pour interrompre la propagation événementielle, appelez la méthode stopPropagation de l'objet événement, comme dans l'exemple qui suit.

Exemple 6.2.2 : Source Voir

<hbox id="outerbox">
  <button id="okbutton" label="OK"/>
</hbox>

<script>
function buttonPressed(event) {
  alert('Le bouton a été pressé !');
}

function boxPressed(event) {
  alert('La boîte a été pressée !');
  event.stopPropagation();
}

var button = document.getElementById("okbutton");
button.addEventListener('command',buttonPressed,true);

var outerbox = document.getElementById("outerbox");
outerbox.addEventListener('command',boxPressed,true);
</script>

Ici, un scrutateur d'événement a été ajouté au bouton, et un autre à la boîte. La méthode stopPropagation est appelée dans le scrutateur de la boîte, donc le scrutateur du bouton ne sera jamais appelé. Si cet appel est enlevé, les deux scrutateurs seront appelés et les deux alertes apparaîtront.

Empêcher l'action par défaut

Si aucun gestionnaire d'événement n'a été enregistré pour un événement donné, alors après avoir accompli les phases de capture et de diffusion, l'élément traitera l'événement dans un mode par défaut. L'action par défaut dépendra de la nature de l'événement et du type d'élément. Par exemple, l'événement popupshowing est envoyé par un menu surgissant juste avant son affichage. L'action par défaut est l'affichage du menu surgissant. Si l'action par défaut est bloquée, l'affichage ne se fera pas. L'action par défaut peut être empêchée avec la méthode preventDefault de l'objet événement, comme dans l'exemple ci-dessous.

Exemple 6.2.3 : Source Voir

<button label="Types" type="menu">
  <menupopup onpopupshowing="event.preventDefault();">
    <menuitem label="Verre"/>
    <menuitem label="Plastique"/>
  </menupopup>
</button>

Alternativement, pour des scrutateurs d'événement par attributs, vous pouvez simplement faire renvoyer la valeur false par le code. Notez que l'empêchement de l'action par défaut ne revient pas à interrompre la propagation événementielle avec la méthode stopPropagation. Même si l'action par défaut a été bloquée, l'événement continue à se propager. De même, l'appel de la méthode stopPropagation ne bloquera pas l'action par défaut. Vous devrez appeler ces deux méthodes pour interrompre les deux actions.

Notez qu'une fois la propagation ou l'action par défaut bloquée, il n'est pas possible de les rendre actives de nouveau pour cet événement.

Les sous-sections ci-dessous listent quelques-uns des événements pouvant être utilisés. Une liste complète est fournie dans la référence des événements.

Événements de la souris

Il y a plusieurs événements pouvant être employés pour gérer les actions de la souris, listés dans le tableau suivant :

click

appelé lorsque la souris est appuyée puis relâchée sur un élément.

dblclick

appelé lorsque la souris est double-cliquée.

mousedown

appelé lorsqu'un bouton de la souris est pressé. Le gestionnaire d'événement est appelé aussitôt que le bouton de la souris est appuyé, avant même qu'il ne soit relâché.

mouseup

appelé lorsque la souris est relâchée sur un élément.

mouseover

appelé lorsque le pointeur de la souris survole un élément. Vous pourriez utiliser cet événement pour mettre en valeur l'élément, toutefois CSS fournit une façon automatique de le faire, il est donc inutile de le faire avec un événement. Vous pouvez toutefois l'utiliser pour afficher une aide dans la barre d'état.

mousemove

appelé lorsque le pointeur de la souris se déplace au-dessus d'un élément. L'événement étant appelé à chaque déplacement de la souris, vous devriez éviter de faire appel à ce gestionnaire pour des tâches trop longues.

mouseout

appelé lorsque le pointeur de la souris quitte un élément. Vous pourriez annuler la mise en valeur de l'élément ou effacer le texte de la barre d'état.

Il existe également un jeu d'événements relatifs au glisser, qui intervient lorsque l'utilisateur maintient le bouton de la souris enfoncé et déplace la souris. Ces événements seront décrits dans la section Glisser-Déposer.

Propriétés des événements des boutons de la souris

Lorsqu'un événement sur un bouton de la souris se produit, vous disposez d'un certain nombre de propriétés supplémentaires pour déterminer quels boutons ont été pressés et la position du pointeur de la souris. La propriété button de 'event' peut être utilisée pour déterminer quel bouton a été pressé, avec les valeurs possibles de 0 pour le bouton de gauche, 1 pour le bouton de droite, et 2 pour le bouton du milieu. Si vous avez configuré votre souris différemment, ces valeurs peuvent être différentes.

La propriété detail contient le nombre de fois que le bouton a été cliqué rapidement en séquence. Elle permet de tester des clics simples, doubles ou triples. Bien entendu, si vous ne souhaitez tester que les double-clics, vous pouvez plutôt utiliser l'événement dblclick. L'événement click sera lancé dès le premier clic, puis de nouveau pour le second clic, puis pour le troisième clic, tandis que l'événement dblclick ne sera lancé que pour un double-clic.

Les propriétés button et detail ne s'appliquent qu'aux événements se rapportant aux boutons de la souris, et non aux déplacements de la souris. Pour l'événement mousemove, par exemple, l'ensemble de ces propriétés aura une valeur de 0.

Propriétés des événements de position de la souris

Toutefois, tous les événements de la souris disposent des propriétés contenant les coordonnées de la position de la souris lors du déclenchement de l'événement. Il y a deux jeux de coordonnées. Le premier jeu définit les propriétés screenX et screenY mesurées depuis le coin supérieur gauche de l'écran. Le second jeu, clientX et clientY, est calculé à partir du coin supérieur gauche du document. Voici un exemple qui affiche les coordonnées courantes de la souris :

Exemple 6.2.4 : Source Voir

<script>

function updateMouseCoordinates(event) {
  var text = "X:" + event.clientX + " Y:" + event.clientY;
  document.getElementById("xy").value = text;
}
</script>

<label id="xy"/>
<hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/>

Dans cet exemple, les dimensions de la boîte ont été fixées explicitement pour que l'effet soit plus visible. Le gestionnaire d'événement récupère les propriétés clientX et clientY et les convertit en une chaîne (string). Cette chaîne est affectée à la propriété value du libellé. Notez que l'argument event doit être passé à la fonction updateMouseCoordinates. Si vous déplacez rapidement la souris autour de la bordure, vous noterez que les coordonnées ne s'arrêtent généralement pas exactement sur 400. Ceci s'explique car l'événement mousemove se déclenche selon un intervalle dépendant de la vitesse de déplacement de la souris, et celle-ci s'est généralement déplacée au-delà de la bordure avant le lancement de l'événement suivant. Évidement, il ne serait pas judicieux d'envoyer un événement mousemove sur chacun des pixels parcourus par la souris.

Coordonnées relatives à un élément

Souvent, ce sont les coordonnées relatives à l'élément qui a déclenché l'événement que vous voulez obtenir, pas celles relatives à la fenêtre entière. Pour y parvenir, il vous suffit de soustraire la position de l'élément à la position de l'événement, comme dans le code suivant.

var element = event.target;
var elementX = event.clientX - element.boxObject.x;
var elementY = event.clientY - element.boxObject.y;

Les éléments XUL ont un objet de boîte accessible en utilisant la propriété boxObject. Nous en apprendrons plus sur l'objet de boîte dans une section ultérieure, mais sachez qu'il contient des informations sur l'affichage de l'élément, incluant notamment ses coordonnées horizontales (x) et verticales (y). Dans cet exemple de code, ces coordonnées sont soustraites de celles de l'événement pour obtenir la position relative de l'élément XUL.

Événements de chargement

L'événement de chargement est envoyé au document (l'élément window) dès que le fichier XUL a fini son chargement et juste avant que son contenu ne soit affiché. Cet événement est couramment utilisé pour initialiser les champs et réaliser d'autres tâches qui doivent être exécutées avant que l'utilisateur ne dispose de la fenêtre. Vous devriez utiliser un événement de chargement pour faire ce genre de chose plutôt que d'ajouter un script de niveau supérieur extérieur à une fonction. Cette préconisation tient au fait que les éléments XUL peuvent ne pas être chargés ou ne pas être totalement initialisés, ce qui peut entraîner des dysfonctionnements. Pour utiliser un événement de chargement, placez l'attribut onload sur l'élément window. Appelez du code à l'intérieur du gestionnaire de chargement afin d'initialiser l'interface si nécessaire.

Il existe également un événement unload qui est appelé dès que la fenêtre est fermée ou, dans un contexte de navigation, lorsque la page bascule vers une autre URL. Vous pouvez utiliser cet événement, par exemple, pour sauvegarder des informations modifiées.

---

Nous verrons ensuite comment ajouter des raccourcis clavier.