Ted On Flash: Understanding DOM Level 3 events in Flash Player/AIR

Understanding DOM Level 3 events in Flash Player/AIR

DIGG IT! 0 Comments Published Wednesday, February 06, 2008 at 8:37 AM .

Kyle Hayes over at Disney Internet Group (DIG) pinged me this morning asking about how event bubbling worked in AS3 using Flex. This seems to be a confusing topic for some as events were completely overhauled in Flash Player 9 and AS3. From the docs:

"The new event model is based on the Document Object Model (DOM) Level 3 Events Specification. Although the SWF file format does not adhere specifically to the Document Object Model standard, there are sufficient similarities between the display list and the structure of the DOM to make implementation of the DOM event model possible. An object on the display list is analogous to a node in the DOM hierarchical structure, and the terms display list object and node are used interchangeably throughout this discussion."

The real key here is that events walk down and up the display list. When an mouse event occurs the event does the following in this order:

Capture Phase (1): Walk down the display list from the root to the target firing listeners that denote the capture phase (see 'true' argument below). Listeners are fired sequentially from the root to the target at each display object in the tree either by listener priority or the order added.

this.addEventListener( MouseEvent.MOUSE_OVER , onMouseOverEvent , true );

Target Phase (2): When the listener is at the event target this phase occurs. (eg. listening on a button for the 'click' event)

Bubble Phase (3): Walk up the display list from the target to the root firing listeners that denote the bubble phase ('bubble' is the default or see 'false' argument below). Listeners are fired sequentially from the target to the root at each display object in the tree either by listener priority or the order added.

this.addEventListener( MouseEvent.MOUSE_OVER , onMouseOverEvent);

or

this.addEventListener( MouseEvent.MOUSE_OVER , onMouseOverEvent , false );

EVENT EXAMPLE

As a simple proof, I put together a flex example for you to try out. It let's you see events tracing at the application level when you interact with components. The key is that the app is listening for capture and bubble phases at the application object and thus all MouseEvent.MOUSE_OVER events with child components are traced.

Also take a look at the event objects themselves as they have an API too. You can take an event and control later event processing. This is handy if you want to stop an event from propagating or dispatch the event as something else entirely. Just as the mouse can dispatch events, so can ActionScript.

this.dispatchEvent( new MouseEvent( 'SecretMouseEvent' );

Once you see how events are working in the player, you can leverage the patterns of DOM 3 events. They are really handing for doing work as events are coming and going across the display list.

Cheers,

Ted :)