0

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");  
}
Pansy Xue
  • 25
  • 6

1 Answers1

0

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
moropus
  • 3,672
  • 1
  • 22
  • 30
  • In fact iconClickHandler is listener2. What confuse me is CUSTOM_EVENT listeners happens earlier than iconClickHandler which dispatch CUSTOM_EVENT – Pansy Xue Aug 22 '11 at 09:31
  • Check everything once again. Make sure: your trace statements (or how do you check handlers order) are written properly and exlude messing (I mean, before any call to next `dispatchEvent`); your custom event name doesn't match any other event name; your listeners and event have proper bubbling and caption flags; – moropus Aug 22 '11 at 09:41
  • Yeah, in iconClickHandler function, dipatched event should be customEvent. I have modified it. I check handler order by flash palyer debuging. The order is customEventHandler, iconClickHandler – Pansy Xue Aug 22 '11 at 09:58
  • Try the updated code. In what order listener strings are written to console? – moropus Aug 22 '11 at 11:22
  • The order is Listener2, listener1, listener3. I don't understand why listener3 is behind listener2. – Pansy Xue Aug 23 '11 at 03:09
  • I update your codes. It seems the update only visible to me. > private function iconClickHandler(event:MouseEvent):void { trace("listener2"); var customEvent:CustomEvent= new CustomEvent(CustomEvent.CUSTOM_EVENT, true, true); dispatchEvent(customEvent); trace("listener3"); } – Pansy Xue Aug 23 '11 at 04:58
  • I approved your update. Check my answer now, I explained the order. – moropus Aug 23 '11 at 06:39