Event bubbling weirdness

I'm seeing some weirdness in event bubbling, which suggests I don't really understand how this is supposed to work.

I have a component which extends DataGroup, and it's item renderer dispatches an event (which bubbles).

// MyRenderer.mxml
<s:ItemRenderer>
    <s:Button click='dispatchEvent(new Event('customEvent',true))' />
</s:ItemRenderer>

The DataGroup adds a listener for the event to itself.

// MyDataGroup.mxml
<s:DataGroup  itemRenderer="MyRenderer" creationComplete='onCreationComplete()'>
   <fx:Metadata>
       [Event(name='customEvent',type='flash.events.Event')]
   </fx:Metadata>
   <fx:Script>
      private function onCreationComplete():void
      {
          addEventListener('customEvent',onCustomEvent);
      }
      private function onCustomEvent(event:Event):void
      {
      }
   </fx:Script>
</s:DataGroup>

The Parent of the datagroup is also adding a listener for the event.

// MyComponent.mxml
<s:Group>
    <MyDataGroup customEv开发者_运维技巧ent='onCustomEventHandler()' />
</s:Group>

I'd have expected that the handler registered in MyDataGroup should catch the event first, then the handler in MyComponent.

However, I'm seeing the reverse - ie., caught in MyComponent, then in MyDataGroup. When caught, event.phase == EventPhase.BUBBLING.

What's going on here? Why am I seeing this behaviour?

I'm using Flex 4.0.

I'm pretty sure the problem is that both of your event listeners are listening to the same instance on the MyDataGroup component.

If you add the an event listener to MyComponent instead of MyDataGroup, you'll get expected behavior:

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" 
          initialize="group1_initializeHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            public function onCustomEventHandler(event:Event):void{
                trace('my Component handler');
            }

            protected function group1_initializeHandler(event:FlexEvent):void
            {
                // add the event listener to 'this' 
                this.addEventListener('customEvent',onCustomEventHandler);
            }

        ]]>
    </fx:Script>
    <martyPitt:MyDataGroup id="dataGroup"  />
    <!-- The event listener here was listening on the myDataGroup instance, not on the MyComponent instance customEvent="onCustomEventHandler(event)"  -->
</s:Group>

I suspect the event listeners--even though not in the same component--were firing based on the order they were added. You'd have to examine the generated ActionScript with the compiler argument '-keep' to figure that out specifically. I suspect your in-line listener (MyComponent) is added in the MyDataGroup constructor. Since the other listener is added in the MyDataGroup a creationComplete handler, the MyComponent listener fires first.

Strange behaviour indeed.

Actually, when you add an event listener inline (in your example :

  <MyDataGroup
 customEvent='onCustomEventHandler()'
 />

), the framework add an event listener on the capture phase. So it's an expected behaviour it enters in your parent handler first. What I don't undestand is that the eventPhase is equals to EventPhase.BUBBLE_PHASE although it should display EventPhase.CAPTURE_PHASE.