Question

I hava a custom component and it contains a child icon. If I add a mouse-click event listener to both component(click-listener1) and icon(click-listener2), the event dispatched sequence is click-listener2, then click-listener1. I can understand it. But if I add a custom event to component (listener1), and mouse-click event to icon(listener2), when icon is clicked, the component will dispatch the custom event. In my test, the event dispatched sequence is listener1, then listener2. It doesn’t match with event-bubbles rule.

In my opinion The custom event is dispatched in listener2, which triggers listener1. Why event flow sequence is not listener2, listener1?

In component.

 icon.addEventListener(MouseEvent.CLICK, iconClickHandler);

    private function iconClickHandler(event:MouseEvent):void
    {
       trace ("Listener2");  
       var customEvent:CustomEvent= new CustomEvent(CustomEvent.CUSTOM_EVENT, true, true);
       dispatchEvent(customEvent)
       trace ("Listener3");  
    }

In Application, which contains component

 component.addEventListener(CustomEvent.CUSTOM_EVENT, customEventHandler);

private function customEventHandler(event:CustomEvent):void {
   trace ("Listener1");  
}

Answer 1

UPD

You’ve got:

private function iconClickHandler(event:MouseEvent):void
{
    trace("listener2");
    var customEvent:CustomEvent= new CustomEvent(CustomEvent.CUSTOM_EVENT, true, true);
    dispatchEvent(customEvent);
    trace("listener3");
}


private function customEventHandler(event:CustomEvent):void
{
    trace("listener1");
}

When MouseEvent.MOUSE_CLICK is dispatched, it triggers first lucky listener – it is your component function iconClickHandler. Here we trace “listener2” and dispatch custom event.

Due to syncronious nature of events, CUSTOM_EVENT listeners are triggered immediatly, that means that dispatching an event is similar to calling listener functions. Events are not stored anywhere, they are not delayed: listeners to events fires immediatly, in the same control flow, in the same thread.

CUSTOM_EVENT was dispatched, its listeners were triggered – we’ve got a call to customEventHandler and “listener1” in console.

When all the listeners were triggered, control returns to iconClickHandler and “listener3” is traced to console.

That’s why we’ve got output:

listener2
listener1
listener3