Bubbling events within custom components in Flex

Question

I am using a custom component within another custom component in a flex mxml application file.Is it possible to bubble events from an inner component to the outer component and handle events in the outer component?

Answer 1

//Outer.mxml
<local:Inner id="inner"/>
inner.addEventListener(TYPE_NAME, handler);
private function handler(e:Event):void
{
    trace("Bingo");
}

//Inner.mxml
dispatchEvent(new Event(TYPE_NAME));

Answer 2

Yes just set the property bubbles to true into you inner component when dispatching:

inner component:

dispatchEvent(new Event("myEvent", true));

outer component:

addEventListener("myEvent", onMyEvent);
...

Answer 3

The Event constructor defaults the bubbles parameter to false so, as Patrick mentions, you need to set bubbles to true when you construct the event.

Once bubbling is enabled, the event will continue to be dispatched up the UI tree until Event.stopPropagation or Event.stopImmediatePropagation is called.

Keep in mind, though, that bubbling only affects UI components; events fired from custom classes will not bubble, even if the bubbles argument is set to true.