Event.bubbles, Event.cancelable, and Event.currentTarget
Perhaps some of you may not know this, but event-bubbling in Actionscript3.0 is way cool and well worth your attention. So read on.
With event-bubbling you can let one Event subsequently call on every ancestor (containers of containers of etc.) of the DisplayObject that originally dispatched the Event, all the way up to the surface (read: Stage), hence the name ‘bubbling’.
Perhaps noteworthy is that bubbling for an Event instance is disabled by default, and can only be activated by setting the bubbling parameter in the Event constructor.
Although the documentation doesn’t seem to make it all too apparent, event-bubbling is actually the reason why the Event class has a currentTarget property (as well as a target property).
So what is the use of Event.currentTarget? While the target property will always have its value set to the DisplayObject that originally dispatched the Event, the currentTarget property always points to the DisplayObject that the event is currently processing (i.e. bubbling at).
Now, you will probably not always want your Event to bubble all the way up to the Stage of your movie. This is where the cancelable property comes into the picture.
Setting the cancelable property contructor-parameter to true allows you to call the stopPropagation() and stopImmediatePropagation() methods later on. Both methods basically abort the bubbling process.
The difference here is that the latter also aborts execution of other listeners for the same Event-type on the same currentTarget, whereas the former only aborts execution of listeners to subsequent targets.
The following example attempts to visualize the concept of event-bubbling in AS3. Click the big button in the middle to dispatch a bubbling Event, and tick the CheckBoxes to have that Event canceled at a specific parent of the Button. Right-click to view source.
For more information, read up in Trevor McCauley’s excellent article about event handling in AS3.
June 11th, 2008 | Quote
thanks! very useful!
April 21st, 2008 | Quote
Nice one, I never noticed. I did a quick read-up in the documentation for the Event-class, it seems that the cancelable-property tells you whether you can use the preventDefault() method to cancel out native behavior (like characters appearing in an input-field when you start typing and have it selected)..
April 14th, 2008 | Quote
Seems you can stop anytime, and it doesn’t matter is it CANCELABLE or not.. So, I still can’t find, what is a use-case of CANCELABLE property?
March 26th, 2008 | Quote
Hey Evan, glad this helped you out with getting a better understanding of the lot. Same goes for me by the way, I’m not all that great with the dry theory either
March 26th, 2008 | Quote
I’ve been trying to wrap my head around event bubbling for a little while now. Thanks for the example, that really helps us who are visual people! Sometimes I just have to see it in action.
Keep it up. And the post you link to is great too, Thanks to Trevor too!
March 17th, 2008 | Quote
Cool, thanks Neil!
March 17th, 2008 | Quote
Another event method which I had overlooked, but have since found very useful, is event.preventDefault() which simply cancels the events default behaviour (if it can be cancelled @see event.cancelable)
February 29th, 2008 | Quote
awesome example, thanks alot from http://www.2pha.com
February 23rd, 2008 | Quote
Well explained. Thanks.
January 21st, 2008 | Quote
Thanks sanjuro! Glad this post helped you out
December 29th, 2007 | Quote
I was searching for a definition of event-bubbling and found this cool example, thank you !
August 3rd, 2007 | Quote
@Michael: Cheers for helping me out man!
@Tony Fendall: Hmm, maybe, I’m not sure if it’d make a lot of sense though..
@Trevor: Thanks! Same goes for your article
@:Jerome Thanks man, it’s been fixed..
August 3rd, 2007 | Quote
URL to the source is actually at
http://www.rubenswieringa.com/blog/wp-content/uploads/2007/flexeventbubbling/source/index.html
:p
August 2nd, 2007 | Quote
Nice example
- Trevor
August 2nd, 2007 | Quote
That’s a really cool demo
It would be nice if the change events from the standard flex controls would bubble, but they don’t.
August 2nd, 2007 | Quote
Awesome demo Ruben… looks good.