[flexcoders] Event Phase clarification bubbling - please Diagram
Fellow FlexCoders... I am sitting here having a debate on how the event phases works in AS3. A couple of us have differing opinions of how events bubble, up or down, inside or out. Maybe I've always been a little confused exactly how bubbling works through the display object hierarchy, can you clarify?.. (from the docs, complete with typo) When an event occurs, it moves through the three phases of the event flow: the capture phase, which flows from the top of the display list hierarchy to the node just before the target node; the target phase, which comprises the target node; and the bubbling phase, which flows from the node subsequent to the target node back up the display list hierarchy. If I have 100 display Objects on the stage, is the top of the list 100, or is it 0? And, isn't the word top, a little confusing, because aren't the displayObjects actually containers? I bet if you work for adobe, this is on a diagram on paper, would the docs team mind adding it to the documentation, just because this really needs a visual aid. So if you can clear this up, then I will understand how the event phase works (and more importantly why it does not like in my current situation). What I want to achieve is have a nested child receive an events from one of it's parents? Bubbling is not working, which is odd, because, shouldn't the whole display list be traversed with bubbling set to true, eventually? The solution, I have used several times, is to add the listener to the application object in Flex, but that seems hackish to me. Thanks, for your time, because I really want to remove all doubt in this area once and for all, since i have been working with as3 for over 2 years now... Patrick
Re: [flexcoders] Event Phase clarification bubbling - please Diagram
Patrick - Events bubble up the parental chain from the dispatcher. So, your child will not ever catch an event that is dispatched by its parent (bubbling or non). Conversely, parents will always catch bubbling events dispatched by their children. This should also aid you in understanding why registering for the bubbling event out at the application level works. Your dispatching component contains the application in its ancestry (parental chain), so eventually the event will bubble up to that level. hth Scott djhatrick wrote: Fellow FlexCoders... I am sitting here having a debate on how the event phases works in AS3. A couple of us have differing opinions of how events bubble, up or down, inside or out. Maybe I've always been a little confused exactly how bubbling works through the display object hierarchy, can you clarify?.. (from the docs, complete with typo) When an event occurs, it moves through the three phases of the event flow: the capture phase, which flows from the top of the display list hierarchy to the node just before the target node; the target phase, which comprises the target node; and the bubbling phase, which flows from the node subsequent to the target node back up the display list hierarchy. If I have 100 display Objects on the stage, is the top of the list 100, or is it 0? And, isn't the word top, a little confusing, because aren't the displayObjects actually containers? I bet if you work for adobe, this is on a diagram on paper, would the docs team mind adding it to the documentation, just because this really needs a visual aid. So if you can clear this up, then I will understand how the event phase works (and more importantly why it does not like in my current situation). What I want to achieve is have a nested child receive an events from one of it's parents? Bubbling is not working, which is odd, because, shouldn't the whole display list be traversed with bubbling set to true, eventually? The solution, I have used several times, is to add the listener to the application object in Flex, but that seems hackish to me. Thanks, for your time, because I really want to remove all doubt in this area once and for all, since i have been working with as3 for over 2 years now... Patrick -- Scott Melby Founder, Fast Lane Software LLC http://www.fastlanesw.com http://blog.fastlanesw.com
Re: [flexcoders] Event Phase clarification bubbling - please Diagram
Here is a simple example, which demonstrates what the docs say
?xml version=1.0 encoding=utf-8?
mx:Application
xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute
applicationComplete=main()
mx:Script
![CDATA[
public function main( args : Array = null ) : void
{
for each( var component in [this, hb1, hb2, b1,
hb3])
{
component.addEventListener(
MouseEvent.MOUSE_DOWN, logEvent, true );
component.addEventListener(
MouseEvent.MOUSE_DOWN, logEvent, false );
}
}
private function logEvent( event : Event ) : void
{
trace( event.eventPhase, event.target,
event.currentTarget );
}
private function traceBubbling( event : Event ) : void
{
trace(bubbling, event.target,
event.currentTarget );
}
]]
/mx:Script
mx:HBox id=hb1 width=100% height=100%/
mx:HBox id=hb2
mx:Button id=b1
/mx:Button
/mx:HBox
mx:HBox id=hb3 width=100% height=100% visible=false/
/mx:Application
output
1 TestBubbling0.hb2.b1 TestBubbling0
1 TestBubbling0.hb2.b1 TestBubbling0.hb2
2 TestBubbling0.hb2.b1 TestBubbling0.hb2.b1
3 TestBubbling0.hb2.b1 TestBubbling0.hb2
3 TestBubbling0.hb2.b1 TestBubbling0
if you switch hb3 to visible, so it covers the button, the output is
1 TestBubbling0.hb3 TestBubbling0
2 TestBubbling0.hb3 TestBubbling0.hb3
3 TestBubbling0.hb3 TestBubbling0
So it is exactly like the docs say. The event goes down the parent
chain to the leaf (which is the top most visible thing) and then it
goes back up to the root.
Cheers
Ralf.
On Wed, Aug 6, 2008 at 6:21 PM, Scott Melby [EMAIL PROTECTED] wrote:
Patrick -
Events bubble up the parental chain from the dispatcher. So, your child
will not ever catch an event that is dispatched by its parent (bubbling
or non). Conversely, parents will always catch bubbling events
dispatched by their children. This should also aid you in understanding
why registering for the bubbling event out at the application level
works. Your dispatching component contains the application in its
ancestry (parental chain), so eventually the event will bubble up to
that level.
hth
Scott
djhatrick wrote:
Fellow FlexCoders...
I am sitting here having a debate on how the event phases works in
AS3. A couple of us have differing opinions of how events bubble, up
or down, inside or out. Maybe I've always been a little confused
exactly how bubbling works through the display object hierarchy, can
you clarify?..
(from the docs, complete with typo)
When an event occurs, it moves through the three phases of the event
flow: the capture phase, which flows from the top of the display list
hierarchy to the node just before the target node; the target phase,
which comprises the target node; and the bubbling phase, which flows
from the node subsequent to the target node back up the display list
hierarchy.
If I have 100 display Objects on the stage, is the top of the list
100, or is it 0? And, isn't the word top, a little confusing, because
aren't the displayObjects actually containers? I bet if you work for
adobe, this is on a diagram on paper, would the docs team mind adding
it to the documentation, just because this really needs a visual aid.
So if you can clear this up, then I will understand how the event
phase works (and more importantly why it does not like in my current
situation). What I want to achieve is have a nested child receive an
events from one of it's parents? Bubbling is not working, which is
odd, because, shouldn't the whole display list be traversed with
bubbling set to true, eventually?
The solution, I have used several times, is to add the listener to the
application object in Flex, but that seems hackish to me.
Thanks, for your time, because I really want to remove all doubt in
this area once and for all, since i have been working with as3 for
over 2 years now...
Patrick
--
Scott Melby
Founder, Fast Lane Software LLC
http://www.fastlanesw.com
http://blog.fastlanesw.com
--
Ralf Bokelberg [EMAIL PROTECTED]
Flex Flash Consultant based in Cologne/Germany
Re: [flexcoders] Event Phase clarification bubbling - please Diagram
On Aug 6, 2008, at 12:48 PM, Ralf Bokelberg wrote: for each( var component in [this, hb1, hb2, b1, hb3]) Hadn't seen that done before. nice. The only downside to the whole event bubbling hooplah is that all your components, and all your children need to extend EventDispatcher or some component that extends it. Otherwise, you have to manually handle the re-dispatching of the event your self, basically bubbling the event manually through the chain. - jon
RE: [flexcoders] Event Phase clarification bubbling - please Diagram
FWIW, we didn't make up the event model. It is based on the W3C spec http://www.w3.org/TR/DOM-Level-3-Events/events.html which has a pretty picture in it From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Jon Bradley Sent: Wednesday, August 06, 2008 10:02 AM To: flexcoders@yahoogroups.com Subject: Re: [flexcoders] Event Phase clarification bubbling - please Diagram On Aug 6, 2008, at 12:48 PM, Ralf Bokelberg wrote: for each( var component in [this, hb1, hb2, b1, hb3]) Hadn't seen that done before. nice. The only downside to the whole event bubbling hooplah is that all your components, and all your children need to extend EventDispatcher or some component that extends it. Otherwise, you have to manually handle the re-dispatching of the event your self, basically bubbling the event manually through the chain. - jon
