DOM événements:Objet Event
Un article de WikiTuto.
Sommaire |
Propriétés et méthodes générales
Le standard
Nous avons déjà signalé qu'à tout appel de gestionnaire d'événement, un objet de type événement est passé en argument à la fonction. Plusieurs propriétés décrivent cet objet et son état. On peut les utiliser, notamment, afin de déterminer d'où est issu l'événement, et à quelle étape précise de son "voyage" il en est (montée ou descente...). Il est également possible de l'intercepter, et de faire en sorte qu'il cesse sa propagation.
| Nom de la propriété | Description |
|---|---|
| bubbles | Un booléen indiquant si l'événement "bubbles" (remonte) ou non. |
| cancelable | Un booléen indiquant si l'événement peut être annulé. |
| currentTarget | Le nœud auquel est affecté le gestionnaire d'événement. |
| eventPhase | Un entier indiquant l'étape où l'événement se trouve dans le flot : il vaut soit CAPTURING_PHASE(1), soit AT_TARGET(2), soit BUBBLING_PHASE(3). |
| target | Le nœud d'où est parti l'événement. |
| timeStamp | L'heure à laquelle l'événement a eu lieu. |
| type | Une chaîne de caractères donnant le type d'évenement, comme "mouseover" ou "click", etc. |
| Nom de la méthode | Description |
| preventDefault() | Peut être utilisé pour annuler l'événement. Cela empêche le navigateur de procéder à l'action par défaut pour l'événement, comme par exemple charger une URL quand un lien a été cliqué. Attention, l'événement va continuer sa propagation le long de l'arbre. |
| stopPropagation() | Coupe le flot de l'événement. Cette méthode peut être utilisée lors de la phase de remontée ou de descente. |
Table 1. Propriétés et méthodes de l'objet Event.
Internet Explorer
En l'état actuel des choses (avril 2006), Internet Explorer ne supporte pas le modèle Event du W3C. Au lieu de passer un argument de type Event à la fonction, il a recours à un objet global, window.event, qui contient le même genre d'informations.
Malheureusement, les propriétés et méthodes de cet objet ne suivent pas les mêmes conventions de notation que celles du W3C.
| Standard W3C | IE window.event | Remarques |
|---|---|---|
| currentTarget | aucun | Voir ci-dessous. |
| eventPhase | aucun | Ne s'applique pas à IE. |
| target | srcElement | Le nœud d'où est issu l'événement. |
| timeStamp | aucun | Non applicable à IE. |
| type | type | Même fonction que dans le standard. |
| preventDefault() | returnValue | Propriété à mettre à false pour stopper tout traitement par défaut de l'événement. |
| stopPropagation() | cancelBubble | Propriété à mettre à true pour stopper la remontée de l'événement. |
Table 2. Équivalents Internet Explorer pour les propriétés et méthodes de l'objet Event.
Afin d'obtenir un équivalent de la propriété currentTarget avec Internet Explorer, il faut utiliser le mot-clef this comme argument lors de l'appel au gestionnaire :
<a href="..." onmouseover="monGestionnaire(event, this)"></a>
function monGestionnaire(event, toto) {
...
}
Événements souris
Propriétés
Les événements souris sont :
- click
- dblclick
- mousedown
- mouseup
- mouseover
- mouseout
- mousemove
| Nom de la propriété | Description |
|---|---|
| altKey, ctrlKey, metaKey, shiftKey | Booléens. Ils valent true si la touche correspondante était enfoncée quand l'événement souris a été activé. |
| button | Un entier indiquant quel bouton de souris était enfoncé : 1=gauche, 2=milieu, 3=droit. Une souris à un seul bouton (type Mac) ne retournera que la valeur 1 ; une souris à deux boutons retournera les valeurs 1 ou 3. |
| clientX, clientY | Donne les coordonnées du pointeur de la souris quand l'événement a eu lieu, par rapport à la fenêtre effectivement disponible (hors barre de défilement). |
| relatedTarget | Sur un mouseover, cette propriété indique le nœud que vient de quitter la souris ; sur un mouseout, il s'agit du nœud sur lequel la souris vient de se placer. |
| screenX, screenY | Donne les coordonnées du pointeur de la souris quand l'événement a eu lieu, par rapport à l'écran. |
Table 3. Liste des propriétés de l'objet event liées à la souris.
Remarques
Les événements souris sont toujours attachés à l'élément de plus bas niveau dans l'arborescence. Par exemple, cela sera le lien si l'utilisateur a cliqué sur un lien inclus dans un paragraphe.
Lors du clic, trois événements ont lieu : mousedown, mouseup et click, toujours dans cet ordre. Ces événements sont toujours traités successivement, le traitement de chacun d'eux ne pouvant débuter que si celui du précédent est terminé.
Compatibilité inter-navigateurs
Opera considère -de manière erronée- que les propriétés clientX et et clientY sont relatives à l'origine de la page (autrement dit, la largeur des barres de défilement est incluse).
Netscape 6 ajoute quelques propriétés propriétaires, telles que layerX, layerY, pageX, pageY et which. Elles sont encore acceptées par souci de compatibilité avec les anciens codes, mais ne font pas partie des standards.
Le modèle utilisé par Internet Explorer diffère encore des standards. Voici une liste des équivalences :
- button porte le même nom, mais ne retourne pas la même valeur. Dans le cas d'Internet Explorer, le codage de l'entier est différent : 0=aucun bouton, 1=gauche, 2=droit, 3=gauche et droit, 4=milieu, 5=gauche et milieu, 6=milieu et droit, 7=gauche, droit et milieu.
- relatedTarget est remplacé par les deux propriétés fromElement et toElement, indiquant respectivement les éléments que la souris vient de quitter, et au-dessus duquel elle vient d'entrer.
- Internet Explorer dispose aussi de offsetX et offsetY, qui sont identiques à layerX et layerY pour Netscape, et donnent les coordonnées du pointeur par rapport à l'élément ciblé.
Exercice 1. Manipulation des gestionnaires d'événements
Exercice 2. Manipulation des gestionnaires d'événements (suite)
Evénements clavier
Introduction
Le DOM niveau 2 n'inclut pas de directive relativement aux événements clavier. Cependant, la recommandation HTML permet l'utilisation des événenements keyup, keypress et keyup pour beaucoup d'éléments. Netscape (et donc, par souci de rétro-compatibilité, Mozilla) et Internet Explorer ont inclus des propriétés afin de permettre la gestion des événements clavier, et notamment le codage des touches du clavier éventuellement enfoncées. En dépit de ces particularités, de fortes similitudes existent.
Dans Mozilla et Netscape, le code ASCII de la touche enfoncée est donné par la propriété keyCode quand l'événement keydown a été activé, et par la propriété charCode pour l'événement keypress.
Internet Explorer stocke le code... Unicode de la touche dans la propriété keyCode pour chacun des trois types d'événements.
Dans les deux cas, les événements keydown et keypress sont activés dès qu'une touche quelconque est enfoncée (y compris une touche de fonction, ou une touche Ctrl, Shift ou Alt). Pour saisir une combinaison de touches comme Shift-a, par exemple, il est nécessaire d'avoir recours à l'événement keypress.
Nous allons passer en revue des exemples de codes renvoyés par ces propriétés pour Internet Explorer et Netscape/Mozilla. Il ne faut pas oublier que certaines combinaisons de touches sont interceptées par le système d'exploitation (par exemple, sous Windows, ctrl-n pour ouvrir une nouvelle fenêtre). Selon le système et le navigateur, vous aurez accès à ces combinaisons de touches ou non.
Internet Explorer
| Touche(s) | keydown | keyup | keypress |
| a | keyCode=65 | keyCode=65 | keyCode=97 |
| shift | keyCode=16 et shiftKey=true | keyCode=16 et shiftKey=false | Inapplicable. |
| shift-a | L'événement est actif, quelle que soit la touche enfoncée. | L'événement est actif, quelle que soit la touche enfoncée. | keyCode=65 et shiftKey=true |
| z | keyCode=90 | keyCode=90 | keyCode=122 |
| ctrl | keyCode=17 et ctrlKey=true | keyCode=17 et ctrlKey=true | Inapplicable. |
| ctrl-z | L'événement est actif, quelle que soit la touche enfoncée. | L'événement est actif, quelle que soit la touche enfoncée. | keyCode=26 et ctrlKey=true |
Table 4. Exemples d'événements clavier pour Internet Explorer.
Netscape et Mozilla
| Touche(s) | keydown | keyup | keypress |
| a | charCode=0, keyCode=65, which=65 | charCode=0, keyCode=65, which=65 | charCode=97, keyCode=0, which=97 |
| shift | charCode=0, keyCode=16, shiftKey=true | charCode=0, keyCode=16, shiftKey=false | Inapplicable. |
| shift-a | L'événement est actif, quelle que soit la touche enfoncée. | Chaque touche renvoie un événement séparé ; de plus, shiftKey=true pour la touche a. | charCode=65, keyCode=0, which=65, shiftKey=false (!) |
| z | charCode=0, keyCode=90, which=90 | charCode=0, keyCode=90, which=90 | charCode=122, keyCode=0, which=1 |
| ctrl | charCode=0, keyCode=17, ctrlKey=true | charCode=0, keyCode=17, ctrlKey=false | Inapplicable. |
| ctrl-z | L'événement est actif, quelle que soit la touche enfoncée. | Chaque touche renvoie un événement séparé ; de plus, ctrlKey=true pour la touche z. | charCode=122, keyCode=0, which=122, ctrlKey=true |
Table 5. Exemples d'événements clavier pour Netscape et Mozilla.
Voir aussi
- Comment appeler un événement?
- flot d'événements
- L'objet Event
