Question

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 customEvent='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.

Answer 1

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.