DOM événements:Flot d'événements
Un article de WikiTuto.
Sommaire |
Propagation d'événements
Avant d'aller plus avant, il serait bon de faire le point sur le flot d'événements dans le DOM. Des termes qui semblent de prime abord compliqués et qui découlent d'une constatation : en HTML ou en XML, les documents sont structurés sous la forme d'une hiérarchie. Les nœuds de type texte et les éléments, à part l'élément racine, sont les enfants d'autres éléments. Pour cette raison, dès lors qu'un événement a lieu dans un élément donné, il se répercute de proche en proche tout au long de la chaîne de ses ancêtres. Considérons par exemple le code HTML ci-dessous :
<div> <p>Un peu de texte dans un paragraphe.</p> <p>Un autre texte dans un deuxième paragraphe.</p> <p>Encore du texte dans un paragraphe, avec <a href="index.html">un lien</a>.</p> </div>
Si on clique sur le lien dans le troisième paragraphe, sera généré un événement onclick. Mais on aura également cliqué sur le paragraphe contenant le lien, ainsi que sur l'élément <div> contenant le paragraphe, aussi bien que sur l'élément <body> englobant le tout...
N'importe lequel des éléments de cette chaîne peut avoir un gestionnaire d'événement associé au clic de souris, quel que soit l'élément duquel l'événement est parti.
Selon les standards, il existe deux manières pour un événement de "naviguer" de haut en bas de la chaîne d'éléments : il s'agit de l'event bubbling et de l'event capture.
Event bubbling (remontée d'événements)
Le comportement par défaut des éléments est appelée l'event bubbling. Il recouvre ce concept de remontée des événements le long de l'arborescence du fichier HTML, tout comme une bulle remonte de proche en proche.
Il est possible pour un gestionnaire d'événement de l'annuler, mais s'il ne le fait pas, l'événement continue de se propager de proche en proche jusqu'au sommet de la structure du document. Dans l'exemple précédent, de proche en proche, l'événement continue à se propager jusqu'à arriver au navigateur lui-même, qui, finalement, charge l'URL spécifiée dans le lien.
Tant l'élément p, que le div ou tout autre élément dans la hiérarchie pourrait avoir un gestionnaire d'événement, appelé à son tour, au fur et à mesure de la remontée de l'événement.
Cette phase est appelée bubble phase dans le DOM. Tous les événements ne remontent pas de la sorte ; par exemple onfocus et onblur ne remontent jamais. De même, tous les événements ne peuvent être annulés à un moment quelconque de leur remontée. On peut le savoir grâce à l'objet event et à ses propriétés, ainsi que nous le verrons.
Event capture (capture d'événement)
Le standard
On peut également intercepter un événement lors de la phase de capture, en utilisant l'event listener vu précédemment. Cette phase de capture est le complémentaire de la phase de remontée. Elle a lieu en premier ; l'événement descend le long de l'arborescence du document depuis la racine jusqu'à l'élément, avant de remonter.
Lors de cette phase, un élément parent est affecté par un événement avant que ce dernier ne se propage jusqu'à l'élément sur lequel l'événement a effectivement eu lieu. Cela permet de gérer des priorités, et permet d'intercepter un événement pour un élément, quel que soit l'élément descendant de ce dernier sur lequel l'événement a effectivement eu lieu. Dans notre exemple précédent, le clic sur le lien aurait d'abord été géré par le gestionnaire d'événement de l'élément body, puis celui du div, puis celui du paragraphe, enfin celui du lien.
Internet Explorer
Seul Mozilla gère cette phase de capture pour tous les événements. Internet Explorer ne le prend en compte que pour les événements de souris, à l'aide des méthodes setCapture() et releaseCapture(). Voir la documentation Microsoft pour plus de détails sur setCapture() et releaseCapture().
Exemple
L'exemple suivant montre la remontée et descente des événements dans la structure du DOM
Voir aussi
- Comment appeler un événement?
- flot d'événements
- L'objet Event
