Steven Pemberton, W3C/CWI
Date de cette version : 21 Juillet 2004
Ce document est une introduction rapide aux Événements XML (traduction
française) pour les auteurs HTML. Les Événements XML constituent une méthode de
capture d'événements dans les langages de balisage, qui offre différents avantages
par rapport à la gestion d'événements HTML du style de onclick.
La chose importante à savoir à propos des Événements XML est qu'ils utilisent exactement le même mécanisme d'événements que HTML, mais qu'il est juste écrit différemment.
Considérons cet exemple en HTML :
<input type="submit" onclick="verifier(); return true;">
Ceci signifie que si l'élément <input> (ou l'un de ses descendants)
reçoit l'événement click, alors la partie de code contenue dans
l'attribut onclick est effectuée.
Nous écrivons "ou l'un de ses descendants" parce que dans le cas suivant
<a href="..." onclick="...">Un <em>très</em> beau lieu à visiter</a>
ou
<a href="..." onclick="..."><strong>Plus</strong></a>
l'objectif est que onclick soit effectué même si le clic
a en réalité lieu sur les éléments <em> ou
<strong>. Dans ce cas, l'élément qui a été cliqué est nommé
la cible, et l'élément qui répond à l'événement
l'observateur (même si souvent la cible est le même
élément que l'observateur).
On voit donc qu'il y a trois éléments importants impliqués : un événement, un observateur, et un morceau de script (appelé un gestionnaire). Comme on peut l'observer dans l'exemple ci-dessus, la quatrième chose, la cible, n'est habituellement pas importante.
La manière dont HTML spécifie la relation liant ces trois éléments pose quelques problèmes :
onflash
si un événement flash était introduit.click, alors qu'en fait peu importe comment le bouton
a été activé, tout ce qui compte c'est qu'il a été activéonclick, un pour JavaScript et un pour VB)Les Événements XML spécifient la relation entre l'événement, l'observateur et le gestionnaire d'une manière différente. L'équivalent à :
<input type="submit" onclick="valider(); return true;">
serait :
<input type="submit">
<script ev:event="DOMActivate" type="text/javascript">
valider();
</script>
</input>
(Notez qu'il n'existe pour l'instant aucun langage de balisage qui vous permette d'écrire exactement cela : ces exemples montrent juste quel serait le balisage équivalent, afin d'expliquer les concepts. Il y a quelques liens à la fin de ce document vers des langages qui emploient déjà les Événements XML.)
Ceci signifie que l'élément <script> est un gestionnaire pour
l'événement DOMActivate (que l'on utilise de préférence à
click, parce que des boutons peuvent être activés de différentes manières, et
pas uniquement par des clics) et, en l'absence d'autre information, l'élément parent
est l'observateur (<input> dans ce cas).
(Notez que les gestionnaires doivent seulement être évalués lorsque l'événement se
produit, et pas lors du chargement du document comme avec <script> en
HTML4.)
Cette approche vous permet maintenant de spécifier des gestionnaires pour différents langages de scripting :
<input type="submit">
<script ev:event="DOMActivate" type="text/javascript">
...
</script>
<script ev:event="DOMActivate" type="text/vbs">
...
</script>
</input>
et/ou différents événements :
<input type="submit">
<script ev:event="DOMActivate" type="text/javascript">
...
</script>
<script ev:event="DOMFocusIn" type="text/javascript">
...
</script>
</input>
Vous en savez maintenant suffisament pour faire de la gestion d'événements en utilisant les Événements XML. Cependant, il existe quelques autres caractéristiques utiles.
Exactement comme avec HTML, il y a d'autres manières de spécifier la relation
événement-observateur-gestionnaire. Vous pouvez placer l'information sur le
gestionnaire, sur l'observateur, ou dans un élément <écouteur>. Notez
que, quelle que soit la méthode que vous employez, vous devez toujours spécifier les trois parties. Ainsi,
si vous utilisez le gestionnaire, vous devez définir l'événement et l'observateur, si
vous utilisez l'observateur vous devez préciser quels sont l'événement et le gestionnaire, et avec
l'<écouteur> vous devez spécifier les trois.
Le principal motif de cette action est de gérer plus aisément vos documents. Vous pouvez séparer tout le scripting du corps principal de votre document. Cela vous permet également d'éviter la multiplication nombre de gestionnaires, en ayant juste un exemplaire de chaque gestionnaire, que vous pouvez appliquer à différents endroits.
Dans ce cas, vous placez le gestionnaire à un certain endroit de votre document, et vous
spécifiez la relation à cet endroit (de la même manière que certaines
versions de HTML utilisent l'attribut for
sur l'élément <script>) :
<script ev:observer="bouton" ev:event="DOMActivate" type="text/javascript">
valider();
</script>
...
<input type="submit" id="bouton"/>
Dans ce cas, vous placez également le gestionnaire quelque part, et spécifiez la relation à
un autre endroit à l'aide de l'élément <listener> (ce qui permet
d'utiliser le même gestionnaire pour plus d'un observateur) :
<ev:listener observer="bouton" handler="#validateur" event="DOMActivate"/>
...
<script id="validateur" type="text/javascript">
valider();
</script>
...
<input type="submit" id="bouton"/>
(Notez que dans ce cas c'est l'élément <listener>
qui porte le préfixe ev:, et non les attributs.)
Et, enfin, vous pouvez préciser la relation au niveau de l'observateur :
<script id="validateur" type="text/javascript">
valider();
</script>
...
<input type="submit" ev:handler="#validateur" ev:event="DOMActivate"/>
C'est réellement tout ce que vous devez savoir pour une utilisation quotidienne des événements. Il y a toutefois quelques détails qui peuvent occasionnellement être utiles.
Étant donné que les gestionnaires d'événement sont appelés pour un élément ou l'un de ses descendants, il est par exemple possible d'écouter tous les clics sur le contenu d'un paragraphe :
<p>
<script ev:event="DOMActivate" type="...">
...
</script>
...
<a href="...">...</a>
...
<a href="...">...</a>
...
</p>
ce qui permettra de réagir aux clics sur chaque <a> contenu dans le paragraphe
(ainsi que sur tout le reste du contenu du paragraphe).
Cependant, étant donné que les éléments <a> peuvent également porter
des gestionnaires, l'attribut phase est utilisé afin de préciser si
un gestionnaire donné doit être activé avant ou après les gestionnaires situés plus bas
dans l'arbre. Normalement, les gestionnaires situés plus bas dans l'arbre pour un événement sont activés
en premier, mais l'attribut ev:phase="capture" permet de faire exécuter un
gestionnaire situé plus haut dans l'arbre avant ceux situés plus bas pour un même événement :
<p>
<script ev:event="DOMActivate" ev:phase="capture" type="...">
<!-- Ce gestionnaire sera exécuté avant tout autre gestionnaire plus bas dans l'arbre -->
...
</script>
...
<a href="...">...</a>
...
<a href="...">...</a>
...
</p>
Si c'est vraiment un élément particulier qui doit être la cible, vous pouvez préciser que vous écoutez uniquement les événements pour cet élément :
<p>
<script ev:event="DOMActivate" ev:target="img1" type="...">
...
</script>
...
<a href="..."><img id="img1" ... /><img id="img2" ... /></a>
</p>
(Gardez à l'esprit que la cible est l'objet cliqué, qui n'a haituellement pas une grande importance.)
Les gestionnaires d'événements pour un événement sont parcourus dans l'ordre suivant : en premier
tous les gestionnaires ayant ev:phase="capture", en commençant en haut de
l'arbre, puis en descendant jusqu'à l'élément père de la cible, et ensuite tous les
autres gestionnaires, en partant de l'élément cible, et en remontant vers le haut de
l'arbre.
Si un gestionnaire a l'attribut ev:propagate="stop", aucun gestionnaire situé après
ceux de l'élément courant ne sera appelé pour l'événement courant.
<body>
<script ev:event="DOMActivate" ev:propagate="stop" ev:phase="capture" type="...">
<!-- Ce script est le seul qui réagira à DOMActivate -->
...
</script>
...
</body>
Soit dit en passant, s'il y a plus d'un gestionnaire sur un élément pour un même événement, l'ordre dans lequel ils sont effectués est indéterminé.
De nombreux événements ont une action par défaut (default action) qui est exécutée
après que tous les gestionnaires de l'événement dans l'arbre ont été effectués. Par
exemple, un clic sur un bouton provoquera l'activation du bouton, tandis qu'un clic
sur un <a> ou l'un de ses enfants provoquera l'activation du
lien. Il est possible d'arrêter cette action par défaut avec l'attribut
ev:defaultAction="cancel".
<input type="submit" ...>
<script ev:event="DOMActivate" ev:defaultAction="cancel" type="...">
<!-- Ce script sera actif, mais l'action par défaut ne sera pas effectuée -->
...
</script>
</input>
(C'est ce que onclick="...; return=false;" fait en HTML4. Si
vous voulez le faire de façon conditionnelle dans les Événements XML, vous devez
convenablement appeler la méthode DOM preventDefault.)
Cette introduction vous a montré comment faire de la gestion d'événements en XML. Comme précisé ci-dessus, il n'existe pour l'instant aucune version de XHTML qui supporte les Événements XML avec le scripting ; XHTML2 est en préparation. XForms utilise les Événements XML (même si c'est avec son propre élément <action> au lieu de <script>) ; d'autres langages utilisant les Événements XML sont XHTML+Voice (également connu sous le nom X+V), et SVG 1.2 (également en préparation).
Droit de copie ©2004 W3C® (MIT, ERCIM, Keio), tous droits réservés. Les règles de responsabilité, de nom de marque, d'utilisation de document et de licence des logiciels du W3C s'appliquent. Vos actions réciproques avec ce site sont en conformité avec nos déclarations publiques et celles ayant trait à la confidentialité de nos membres.