Event Bubbling in Flex

Event target may or may not be visible on screen. If not visible (like HTTPService), flash player dispatches event directly to the target. If visible, event flow is divided in three phases:
1. capture phase: flowing from base application to target
2. target phase
3. bubble phase: flow from target to base (reverse of 1)

This design enables using event listeners on any node in the flow. Was not there before Flex2. Due to this an even in the child can be heard by parent. All instances of the Event class have a bubbles property which indicates if event object will participate in bubbling phase. By default false for newly built events; Event class takes it as a second optional parameter set to false by default. Default true for some built in events like click.

You do not need to handle a bubbling event in between but you need to have it declared in the metadata so that the parent component may be able to hear it.

Remember that only custom events need to be enumerated explicitly with a metadata tag. But if they are of base Event type, we can simply mention them after import statements but before class declaration using [Event(name="someEvent")] metadata tag.

Questions:

1. Explain event bubbling in flex.
2. What are the advantages of event bubbling?
3. How do we know if an event object will participate in the bubbling phase?
4. Explain event flow in flex.
   

Flex Events: Introduction

Using events enables a loosely coupled architecture. To broadcast an event from a component you need to use the dispatchEvent method. This method is defined in the flash.events.EventDispatcher class. Observer pattern.

You need to declare the events that may be dispatched by a component. A component may dispatch any event declared by any of the superclasses

In Flex events can be declared using metadata tag [Event], which is used to declare the event publicly so that the MXML compiler recognizes it.
<mx:Metadata>
[Event(name="eventName",type="flash.events.Event")]
</mx:Metadata>
We can specify type. If not mentioned, default is flash.events.Event
The name used here is used to initialize the event type parameter before it is dispatched i.e.
var e:Event = new Event("eventName");

Now when this component is initialized, we can use the event name like any other attribute and specify a function to call
<m:CustomComponent id="myComp" eventName="someLocalFunction()"/>

Many times we may also need to pass around data with the events. Cannot be done with the basic flash.events.Event class. But we can create an event subclass. You will generally need to override clone method of the Event class

Summarizing, we will have these elements in event handling:
1. The event class: you can extend the Event class. clone method is overridden then and the data that we expect the event to carry is member var
2. Event dispatching component: Generally a UI component will dispatch the event after creating in at the appropriate function. The component declares all the events it can dispatch.
3. The listener/event target component/app: This is generally the parent/top level component that uses the event dispatching component. If it is interested in any event dispatched by it, it handle it by listening to it.

Questions

1. Why should you use events?
2. What design pattern does events mechanism employ?
3. How will you declare an event?
4. What is default event type?
5. Why would you use a custom event?
6. With a small example and code explain how events work in flex.