03 Apr, 2009
ActionScript 3 : La propagation d’événement
Posted by: Guillaume Andre In: ActionScript| Air| Flash| Flex
Introduction à la propagation d’événément
La propagation d’événement est le transfert d’un événement unique au travers de plusieurs objets. Ce concept connu des “développeurs objet” a été introduit avec ActionScript 3. La propagation d’événement est donc un concept accessible au sein des applications Flex, Adobe AIR, et Flash.
La propagation d’événement comment ca marche ?
La propagation d’événement se divise en 3 phases distinctes :
- La capture aussi appelé Capture Phase
- La cible aussi appelé Target Phase
- La remontée aussi appelé Bubbling Phase
Voici un schéma qui illustre les différentes phases de la propagation d’un événement :
Le sprite peut être remplacé par n’importe quel objet affichable.
Pour exemple, lors du clic sur le Sprite l’événement traverse Stage et Root (c’est la phase de capture), arrivé à la cible l’événement remonte via Root et enfin Stage. Ainsi vous aurez pu récupérer l’événement à 5 endroits différents.
Jouer avec les écouteurs d’événement
La méthode addEventListener(”event”, handler, useCapture) admet un paramètre appelé useCapture. Ce paramètre permet de spécifier à votre écouteur d’événement à quel moment vous souhaiter écouter l’événement. Ainsi en renseignant ce paramètre à false votre écouteur sera actif que durant la phase cible et la phase de remontée (c’est la valeur par défaut). En le passant à true l’écoute sera également durant la phase de capture.
Voici un exemple pratique avec une application Flex :
<mx:Panel id=”panel” label=”Conteneur” width=”200″ height=”100″>
   <mx:Button id=”button” label=”Mon bouton 1″></mx:Button>
</mx:Panel>
panel.addEventListener(MouseEvent.CLICK, panelClick);
button.addEventListener(MouseEvent.CLICK, buttonClick, true);
root.addEventListener(MouseEvent.CLICK, rootClick);
stage.addEventListener(MouseEvent.CLICK, stageClick);
}
private function stageClick(event:MouseEvent):void {
trace("Ecouteur: Stage");
}
private function rootClick(event:MouseEvent):void {
trace("Ecouteur: Root");
}
private function panelClick(event:MouseEvent):void {
trace("Ecouteur: Panel");
}
private function buttonClick(event:MouseEvent):void {
trace("Ecouteur: Bouton");
}
Ce code renverra donc : Panel > Root > Stage  lors du clic sur le bouton. Pour bien comprendre le fonctionnement de useCapture n’hésitez pas à manipuler ce dernier.