Question

When an event is dispatched by a component, there are three phases in which the event flows, capture – event flows from the application to the component which dispatches the event, target when the event is at the Target which actually dispatches the event , then the bubbling phase in which the event flows from the target to the application. There is a situation in which Application has child comp1 , comp1 has child comp2. I have a button in the comp1 which dispatches the event and I want to listen to that event inside the comp2. Ideally the event would flow from Application->comp1->button->comp1->Application. How can I achieve my objective?

Answer 1

Inside comp1 dispatch your event and make sure it bubbles:

myButton.addEventListener(MouseEvent.CLICK, handleMyButtonClick);

private function handleMyButtonClick(event:MouseEvent):void {
     dispatchEvent(new Event("myCustomEvent", true));
}

Now inside comp2 listen for this event on the stage:

stage.addEventListener("myCustomEvent", handleMyCustomEvent);

That’s it: because the event bubbles, it will always at some point hit the stage. So you can use it to listen from anywhere. Just don’t forget to make sure the stage property of comp2 is set before you try to attach a listener.

Note: be aware that all components in your application will be able to see this event, so make sure that the right component handles the right event. For starters I would never use this approach with built-in events; only use custom events whose types do not coincide with the built-in ones.