Tests : W3C DOM Events

1. Évènement load

Un guetteur est enregistré sur l’objet document pour l’évènement load. Une fois la page chargée, vous devriez voir apparaître les détails concernant cet évènement dans le tableau de droite.

2. Évènements de base

Tests d’une série d’évènements de base.

Évènements souris
click (bis)

Le bloc ci-contre indique l’enchaînement des évènements survenant sur le premier bouton ou le lien lorsque vous cliquez dessus.

Le chiffre entre parenthèses est la valeur de Event.detail pour l’évènement en question (nombre de déclenchements successifs).

L’enchaînement correct des évènements (pour deux click successifs) est le suivant : mousedown (1), mouseup (1), click (1), mousedown (2), mouseup (2), click (2).

Si des évènements mouseover, mouseout ou mousemove surviennent entre la pression (mousedown) et le relachement (mouseup) d’un bouton de la souris, la valeur de Event.detail pour l’évènement mouseup est 0 et l’évènement click ne doit pas se produire.

Évènements clavier
Évènement change
Option n°1
Case à cocher
Boite de sélection :
Évènements divers

3. Mouvement et position de la souris

Test des évènements mouseover, mouseout et mousemove.

Élément DIV sur lequel sont enregistrés deux guetteurs, l’un pour l’évènement mouseover et l’autre pour l’évènement mouseout
Élément DIV
Élément DIV contenant plusieurs balises SPAN et sur lequel est enregistré un guetteur pour l’évènement mousemove.
Test des propriétés target.

4. Phases de capture et de bouillonnement d’évènements

Réglages :

Choisissez "bloquant" pour un calque donné pour que l’évènement ne se propage pas au-delà de ce nœud.

calque 1 (bubble) (non-bloquant)
calque 2 (bubble) (non-bloquant)
calque 3 (bubble) (non-bloquant)

5. Empécher l’action par défaut

Vous pouvez tester sur ce lien.

6. Ajout et retrait d’un guetteur sur un élément créé avec DOM

On teste ici notre méthode Document.createElement() qui appelle la vraie méthode Document.createElement() déplacée dans Document.DOM_createElement() puis passe le nouveau nœud dans la fonction DOM_addProperties().

7. Déclenchement d’évènements

Nous testons ici le mécanisme de déclenchement d’évènements.

Un guetteur est enregistré sur le DIV #theDiv pour l’évènement click. Nous enregistrons également un guetteur pour notre évènement personnalisé (que nous avons nommé MYCustomEvent).

#theDiv
(span interne) lien

8. Ajout et retrait de guetteurs durant un traitement

La recommandation dit : Si un guetteur d’évènement est enregistré sur un nœud alors que l’évènement est en train d’être traité sur ce nœud, ce guetteur ne sera pas déclenché durant la phase en cours mais pourra l’être lors d’une phase ultérieure du flux d’évènement.

Pour une situation identique, si l’on retire un guetteur au lieu d’en ajouter un, la recommandation dit : Si un guetteur d’évènement est retiré d’un nœud alors que l’évènement est en train d’être traité sur ce nœud, ce guetteur ne sera pas déclenché par les actions en cours. Une fois retiré, le guetteur d’évènement n’est jamais invoqué à nouveau (à moins d’être réenregistré pour un traitement ultérieur).

J’ai donné là la traduction du passage en question dans les notes de travail concernant le module Events du DOM niveau 3. Le DOM niveau 2 dit la même chose mais de façon un peu moins claire.

Ce test va nous permettre de vérifier les choses suivantes :

9. Clonage de nœud

Concernant le clonage d’un nœud et ce que l’on doit faire des guetteurs d’évènements qui lui sont rattachés, la recommandation dit : Quand un objet Node est recopié en utilisant la méthode cloneNode, les objets EventListener attachés au Node source ne sont pas rattachés au Node copié. Si l'utilisateur souhaite ajouter les mêmes objets EventListener à la copie nouvellement créée, il doit le faire manuellement.

La méthode Node.cloneNode() native est déplacée vers Node.DOM_cloneNode(). Notre propre méthode Node.cloneNode() appelle Node.DOM_cloneNode() puis passe le nœud copié à la fonction DOM_addProperties(). On fait de même pour tous les enfants de ce nœud si on a à faire à un clonage en profondeur.

10. Évènements spécifiques au DOM du W3C

On vérifie que les évènements ajoutés dans le modèle évènements du W3C (Évènements d’interface, de mutation…) fonctionnent toujours avec notre interface.

Bonne nouvelle : La gestion des évènements de mutation semble implémentée dans la récente version 8.0 (beta) d’Opera.

11. Traitement de l’évènement et retrait de nœud

La recommandation indique que la chaîne des ancêtres de la cible de l’évènement jusqu’à la racine du document est déterminé avant le début du traitement de l’évènement ( Chapitre 1.2 sur la description du flux d’évènement).

Ce test va nous permettre de vérifier que les guetteurs enregistrés sur un nœud ancêtre de la cible retiré du document sont bien déclenchés.

Bugs mozilla "corrigés" avec le patch

Et sùrement d’autres…

Durée du patch dans les différents navigateurs

Navigateur Durée en millisecondes
Pour environ 400 éléments à traiter sur cette page
Firefox 1.0 ±100 ms
Mozilla 1.8a5 ±100 ms
Opera 7.54 ±65 ms
Opera 8.0b1 ±25 ms (wow !)
MSIE 6.0sp1 ±155 ms au premier affichage, puis augmente par tranche de ±100 ms à chaque réactualisation ?!

Ces résultats ont été obtenus sur un athlon XP 1800+ disposant de 768 Mo de RAM. Le problème concernant MSIE est plus ou moins résolu, cela est dù au fait que MSIE ne détruit pas les références aux nœuds manipulés dans un script, d’où une utilisation croissante de la mémoire utilisée par ce navigateur. Plus de détails sur cette page (Merci à Loufoque).

Suivi d’évènements

No event dispatched

Flux d’évènement

No event flow
Propriété Valeur
  • Les propriétés suivies d’un astérisque ne sont pas présentes dans la spécification sur le DOM2 Events
  • Un tiret dans la case correspondant à la valeur signifie que cette propriété n’est pas définie dans le contexte de l’évènement déclenché, conformément à la spécification
Propriétés génériques
type
eventPhase
bubbles
cancelable
timeStamp
view
Targets
currentTarget
target
relatedTarget
Propriétés relatives à la souris et au clavier
screen X,Y
client X,Y
page X,Y *
offset X,Y *
layer X,Y *
altKey
ctrlKey
metaKey
shiftKey
button
detail
keyCode *

Utilitaire : Suivi des évènements

L’utilitaire Suivi des évènements vous permet de savoir quels sont les dix derniers types d’évènements gérés par l’interface. Pratique dans le cas d’évènements se succédant rapidement (le tableau des propriétés et l’utilitaire flux d’évènement ne donnant d’information que sur le dernier évènement traité).

Cet utilitaire est désactivé par défaut mais peut être activé en cliquant sur l’icône d’activation.

Utilitaire : Suivi du flux d’évènement

L’utilitaire flux d’évènement vous permet de visualiser le cheminement effectué par l’évènement dans l’arbre du document tout au long des différentes phases ainsi que les nœuds affectés par l’évènement.

L’utilitaire précise également pour chacun des nœuds si des guetteurs ont été trouvés ou non et si les méthodes stopPropagation() et preventDefault() ont été appellées.

Vous pouvez mettre en exergue dans le document les nœuds affectés en cliquant sur le nom du tag (actuellement, fonctionne mal sur Opera et pas du tout sur MSIE).

Enfin, l’utilitaire est désactivé par défaut, mais peut être activé en cliquant sur l’icône d’activation.

Références