As a child, I never thought much about why bubbles worked. I just stuck the wand in the bottle, lifted it back out, and blew. It was fun to watch the bubbles rise up in the air and float away. It was even more fun when there was a dog around, because then you could watch the dog chase the bubbles.

When I started working with Flex, however, I found that I had to think about bubbles. What are bubbles? How do they work? What is the point of bubbles?

I’m not sure I fully understand them yet, but I’m starting to figure out some of their practical uses, and it occurs to me that the bottled bubbles help a little. Just like those bubbles float up and up through the air until a dog or some other event handler does something with them, bubbling events float up through the application containers. The containers can either enjoy watching the events float, or they can jump up and handle them.

It turns out that this behavior can save some work and help to build loosely coupled components. For example, suppose you have a form-based app with a validation routine that checks to see whether the user has changed the data. One way to do this is to run the routine whenever any field in any form loses focus. Obviously, writing code to add the event handler to every single form element is sub-optimal. This is where bubbling can come in handy: You can create an event listener in the root container (usually the main Application mxml file) that listens for the focusOut event. Every time any form element in the app loses focus, this event will be fired. This is a fine place to put the code that checks whether the user has made any modifications to the data.

• Click here to view a sample app that demonstrates event bubbling. Right-click on the app to view and download the source.