Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I'm trying to wrap my head around the general workings and principles of event dispatching in event-driven (sub-)systems.

Although I have used it on quite a few occasions in for instance Javascript, Flash (Actionscript 2 and 3) and have even made a simple event dispatching system in PHP for myself at one time, I've never really understood event bubbling and/or propagation that well.

First question:
Is event bubbling synonym to event propagation?

Second question:
Am I correct in my understanding that when an event "bubbles", this means that it gets "moved" up the hierarchy of objects?

Third and most important question:
If my understanding in question 2 is correct; how is this "moving" up the hierarchy of objects generally implemented?
Does it generally mean that the parent object "redispatches" the same event to its parent (until it reaches the root object)? And if so; do all these objects in the hierarchy need to listen to their children for these events, or am I missing something vital principle in my understanding about event bubbling, where there's no need to let parent object register them selfs as listeners of child object events?

If you could illustrate these basic principles by means of some simple pseudo code, I'd be more than grateful.

share|improve this question
1  
A related article: Event order –  Jonas Sep 26 '11 at 21:55
    
@Jonas: great article! Thank you! –  fireeyedboy Sep 26 '11 at 22:25
add comment

2 Answers

up vote 6 down vote accepted

First question: Is event bubbling synonym to event propagation?

No. Bubbling is a form of event propagation, but it can't be used as a synonym. Propagation is a general term for passing an event around. Bubbling is a specific strategy of event propagation.

Second question: Am I correct in my understanding that when an event "bubbles", this means that it gets "moved" up the hierarchy of objects?

Yes. Bubbling means it goes up the hierarchy, as opposed to tunneling, which means it goes from the top element down or routing, which means the next object to receive the event can be anything you choose.

Third and most important question: If my understanding in question 2 is correct; how is this "moving" up the hierarchy of objects generally implemented?

Pretty easy. In your visual hierarchy the controls have a reference to their parent/their top level visual or can obtain it somewhere. So when they capture an event, they just notify its parent about it, which notifies its parent about it etc.

Pseudo Code is like this for any UI control:

OnEvent(SomeEvent event)
{
   CallHandlersForEvent(event);
   if(HasParent && event.ContinueBubbling == true)
   {
       Parent.OnEvent(event);
   }
}

Like blueberryfields said it needn't be the direct parent who receives the event next. You could implement like this, too:

OnEvent(SomeEvent event)
{
    CallHandlersForEvent(event);
    NextControl = VisualTree.GetVisualParent(this);
    if(NextControl != null && event.ContinueBubbling == true)
    {
       NextControl.OnEvent(event);
    }
}
share|improve this answer
    
+1 The pseudo code makes much sense to me, thank you! (As does the rest of your answer, by the way.) –  fireeyedboy Sep 26 '11 at 22:18
    
@fireeyedboy: You're welcome =) –  Falcon Sep 26 '11 at 22:20
add comment

First answer:

Event bubbling is one specific algorithm guiding event propagation.

Second answer:

No, bubbling is not necessarily related to any hierarchy. How objects are represented internally or elsewhere doesn`t really matter for the algorithm to work properly. Ideally, when an event bubbles, it expands outwards from the innermost visible element on the screen, through to the outermost visible element on the screen.

Third answer:

The implementation details can vary a lot depending on how the internals of each (browser) are implemented. The bubbling algorithm depends on the visuals on the screen. If an encapsulating element is higher on the inheritance hierarchy than an inner element, the bubbling might be implemented using standard inheritance mechanisms in the language, for example. But that`s not necessarily true - you may have a specialized mechanism which can interpret both internal structures and their visibility on the screen, and propagate events according to the algorithm while ignoring internal organization.

share|improve this answer
1  
Why are you saying: "bubbling is not necessarily related to any hierarchy". In my opinion it is. Without hierarchy there's no bubbling. There must be some sort of tree. Can you name an example of bubbling without a tree-structure? Your example "from inner most to outermost visible element" is just that - a visual hierarchy. –  Falcon Sep 26 '11 at 21:54
1  
Sure, you can interpret it as a hierarchy if you really want to. I prefer to think of it as a loosely coupled graph, which includes some visual and some non-visual elements. –  blueberryfields Sep 26 '11 at 22:01
2  
But then the bubbling analogy fails. Because in a graph the event could be routed anywhere while bubbling clearly goes from bottom to top. –  Falcon Sep 26 '11 at 22:06
    
I think you can't call it bubbling in an arbitrary graph anymore. It has to be called "event routing" then imho. –  Falcon Sep 26 '11 at 22:13
1  
I believe Falcon makes some fair points. Sounds reasonable to think of bubbling as something that moves up (a hierarchy). –  fireeyedboy Sep 26 '11 at 22:24
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.