Event bubbling in the ActionScript world

I have been putting off writing this post but now that I am in between jobs I thought it was the good time. Well, I have been putting this off because it seemed like a good topic at the time, but eventually the concept of event bubbling became easy to me and than I felt no point in writing about it, but I guess it is not the same for every one. So here is my take on the subject.

Event bubbling in general

Event bubbling is not a concept that is particular to ActionScript but it is handled in special way by it. Event bubbling inscribe itself in an event model where events are dispatched and listened for. The bubbling part refers to event going up like bubbles in water (that’s my interpretation of the name). It doesn’t really make an sense also outside of the object oriented programming realm because of the need of encapsulation. It also implies some sort of composition because an object(Class (i’ll refer to #1 later)) needs to have another object(#2) created inside of it in order for it(#1) to listen to events dispatched by the second object(#2). Thus creating a hierarchy and enabling the possibility of event bubbling.

So in the preceding example I had 2 levels of hierarchy and every thing was fine, no need for event bubbling when object(#1) can easily listen to objects(#2) events. Now if I had 3 levels of hierarchy, object(#3) is inside of object(#2) which is inside of object(#1) we could use event bubbling to save some coding. Object(#1) can listen to object(#2) and object(#2) can listen to object(#3) but without adding code or making object(#3) public inside object(#2), object(#1) cannot receive the events from object(#3). Oh my, I hope this doesn’t sound too complicated with all those number signs. Ok so here we get to the concept, if we enabled the bubbling of events when dispatched in object(#3), the events would the go up (bubble) the hierarchy and make there way to object(#1) through object(#2) as if object(#2) had dispatched them. Keep on reading it gets easier (I hope).

Event bubbling in ActionScript

Now in the ActionScript world, event bubbling works in a particular way; it is tied to the Display List (The “Display List” is the hierarchy of graphical objects in your movie to be displayed on screen at runtime) . Meaning you cannot have event bubbling, using the event system of ActionScript, if your dispatcher is not added to the Display List (you didn’t do addChild to a children of the Stage to add your object). You can dispatch events just fine, but they won’t bubble even if you set bubbling to true.

What is cool with the Diplay List is that you can really picture the hierarchy using the mathematical structure of the tree (well if you flip it upside down it looks like a tree). Here is an visual example.

Ok, not my best drawing, but I don’t have Photoshop right now; I used Aviary for the first time and I can say it is quite nice to try, not Photoshop but I think you have to get used to it in order to see its full potential.

Now in that picture, if DisplayObject6 was to dispatch an event with bubbling to true here is who could listen to it.

  • DisplayObjectContainer5 could listen to it; it is the direct parent of DisplayObject6, no need for event bubbling here
  • DisplayObjectContainer3 could listen to it by adding a listener on DisplayObjectContainer5
  • DisplayObjectContainer1 could listen to it by adding a listener on DisplayObjectContainer3
  • The Stage (or Main class) could listen to it by adding a listener on DisplayObject1

Every body in the chain up from that object could listen to it (all at the same time if you wanted, doing each their different action upon receiving the event). If at some point you would like to stop the bubbling of the event you can always do so by using the stopPropagation method in the event class in your event handler method.

So as you see event bubbling is not a really hard concept and can save you from writing some boring repetitive code. (event handler methods). Anyway I might revisit this post later on to fix some things because I don’t think I was clear enough. Maybe I’ll had some code.

, , , , ,

  1. #1 by leandro - April 22nd, 2010 at 13:48

    Nice and clear. Thank you for taking the time to write this.

  2. #2 by sharat achary - May 18th, 2010 at 02:02

    I had dug the internet to get a clear view of the the propagation of events, some other post ( Senocular ) including yours have brought some light to the topic.

    I would request you if you could post something in context to the event phases – ( capture – target – bubbling ).

    Thanks & Regards,

    sharat achary

  3. #3 by Abe K - September 17th, 2010 at 10:14

    Could you also add another line telling how DispObj4 could receive the event too if needed?

(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.