Payday Loans Online Payday Loans Online

Todd Rothe : UI/UX Developer

it's pronounced rowth-ee

By 2g1c2 girls 1 cup

AS3 Event Model or Let’s Play Capture Your Target’s Bubble

The AS3 Event Model is not new but knowing the 3 phases can be important during an interview so this post is, in part, for use as a quick reference. More than anything I hope the Tips below are helpful. If you are looking for the A-Y on the AS3 Event Model (the Z remains undocumented) I’ve included some links at the end of the post.

The 3 event phases, as touched on in the title of this post, are
1. The capture phase (eventPhase = 1)
2. The target phase (eventPhase = 2)
3. The bubble phase (eventPhase = 3)

Most Flex components, like Button, extend EventDispatcher. When a button is clicked the click event begins with the capture phase starting at the Application level, that’s right, starting at the top and traveling down the child tree. The event stops diving when it hits its target in the target phase. Finally, in the bubble phase, the event travels back up the tree of ancestors to the Application level. Remember that events only travel between the app and the target – they will not reach the target’s children.

To respond to an event you will need to create a listener whose signature looks like the following. I’m trying to keep this post short so check out the link to the Adobe article at the bottom for more on this.
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

Tip 1: Handy debug trick – put an addEventListener(MouseEvent.CLICK, traceTarget) at the root level of your app and create a traceTarget() function that traces out event.target. This will show you the exact symbol that is firing the click event, and it’s so often not the one you expect.
private function traceTarget(event:MouseEvent):void
{
trace("[MyApp] : event.target: "+ event.target);
}

Tip 2: When creating a custom event, extending Event, notice the param bubbles:Boolean = false. So if your listener does not have useCapture = true (and your event has bubbles = false) your listener function is never going to fire.

Tip 3: Unless you set the useCapture param = true when you create your addEventListener, the listener function will only fire in the bubble phase. But when you set useCapture = true then your listener function will not fire in the bubble phase. If you want your listener function to fire during both the capture and bubble phases you must use two addEventListeners.

Tip 4: Remove event handlers whenever possible. More important for larger apps but a good habit to get into.

The AS3 event model is patterened after the W3C Event Specifications which is totally worth reading since its filled with all the juicy details you never thought to care about.  For the Adobe version you can read their Intro to event handling which as most everything you’ll ever need to know.

more posts at www.toddrothe.com/blog

 

No Responses to “AS3 Event Model or Let’s Play Capture Your Target’s Bubble” (post new)

 

Leave a Reply

You must be logged in to post a comment.