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.
Awesome demo Ruben… looks good.
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.
Nice example
- Trevor
URL to the source is actually at
http://www.rubenswieringa.com/blog/wp-content/uploads/2007/flexeventbubbling/source/index.html
:p
@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..
[...] ago a good friend of mine and I were talking about Events. My friend Ruben was putting together a post about events. While we we’re talking about it we got into a discussion about bubbling events and cases [...]
[...] read more [...]
I was searching for a definition of event-bubbling and found this cool example, thank you !
Thanks sanjuro! Glad this post helped you out
Well explained. Thanks.
awesome example, thanks alot from http://www.2pha.com
[...] between “e.target” and “e.currentTarget”?, found a good explanation here. « Adobe Bootcamp Day 2 - [...]
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)
Cool, thanks Neil!
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!
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
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?
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)..
thanks! very useful!
Thanks man. It finally clicks!
thanks Ruben, good to see that AS3 has a sensible event model. I’ve noticed though that for mouse events e.localX and e.localY always relate to the originating object rather than the object which the event has bubbled up too. I was hoping that I’d be able to use localX to position a knob on a slider but when the mouse is over the knob the value of localX is relative to the knob, even when the value of currentTarget is equal to the slider. Any thoughts on this?
Thanks you very much
This the thing i am searching a lot.
regards
vivek
Any chance you could post the code so I could explore this more?
Hey Jesse, right-click the example and choose “view source”
how would you prevent a event being listened to in a datagrid?
Hey Nikos,
First off I have trouble seeing why you would even want to do that, in general I’d say that’d pretty much be bad practice — but that aside, if you would really want to do that it would depend on whether you’re the one instantiating the DataGrid. If so then you could extend the DataGrid class and override the addEventListener() method so that no eventlistener would actually get added.
If you have no control over how the DataGrid gets created/instantiated then I guess you could rule out any events you don’t want people to listen for by adding eventlisteners for those events yourself (call addEventlistener() with a high priority-parameter value) and call event.stopImmediatePropagation() from within the listener-function..
Hi,
In my application i have a login screen with username , password textinputs and a button.After button is clicked, with username and password entered ,an event is dispatched. immediately if i change either username or password and then again click on the button before previous event is completed, previous click event must be stopped and new event must be dispatched with new username , password . How can i do it?