7 Replies Latest reply on Sep 28, 2010 9:54 PM by BhaskerChari

    Why Event bubbling is needed in During Event life cycle?

    vineet osho Level 1

      Hi

             I just want to know that out of three phases:-

      1. capture phase: flowing from base application to target
      2. target phase
      3. bubble phase: flow from target to base (reverse of 1)

      what is the Necessity of event bubbling phase.since we start with capturing phase from base to target level and targeting phase match the objects that eventlistner bounds.then why we use event bubbling?is it mandatory?

      or what is the benifit of event bubbling.?

      please explain.

       

      Thanks in advance

          Vineet Osho

        • 1. Re: Why Event bubbling is needed in During Event life cycle?
          rootsounds Level 4

          Bubbling is usually disabled by default, but can be a big help with keeping code simple. What bubbling allows you to do is, rather than attach many event listeners to many objects, you may simply attach a single event listener to a parent of these objects. Dispatched events will bubble up to this parent. As a more concrete example, say that you have a chart with 100 items contained within. You could attach a listener to each item, but this would be tedius and carry a lot of overhead. Assuming that the events that these items dispatch are bubbled, you can simply apply a listener to the chart itself.

          1 person found this helpful
          • 2. Re: Why Event bubbling is needed in During Event life cycle?
            vineet osho Level 1

            Thanks a ton for your logical reply.but can you tell how i can enable bubbling phase of mouse click event.so that i can test as you directed and learn some more facts.

             

             

            Thanks and regards

                 Vineet osho.

            • 3. Re: Why Event bubbling is needed in During Event life cycle?
              vineet osho Level 1

              hi

                  i just make a demo by taking a canvas having child box having child button.

              and add listner on creation complete like this:-

              mainContainer.addEventListener(MouseEvent.CLICK,clickHandler,true,0,true);

               

              here mainContainer is id of canvas.but on clicking canvas clickhandler function doesnot works.but on clicking its childern it fires clickhandlerfunction.

              can you explain what is the functioning of that usecapture parameter in addEventListener.which is by default false.and making it true.the compnet on which we add listner cant capture the event but its child capture.

              i am totally confuesd

              i am attaching the code also.please explain.

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                  creationComplete="addListners()">
                  <mx:Canvas id="mainContainer" horizontalCenter="0" verticalCenter="0"
                      height="300" width="300" backgroundColor="cyan">
                      <mx:Box id="box" height="100" width="100" backgroundColor="red">
                          <mx:Button id="btn" label="test"/>
                      </mx:Box>
                  </mx:Canvas>
                  <mx:Script>
                      <![CDATA[
                          import mx.controls.Alert;
                          private function addListners():void{
                              mainContainer.addEventListener(MouseEvent.CLICK,clickHandler,true,0,true);
                          }
                          private function clickHandler(ev:MouseEvent):void{
                              Alert.show('hello');
                          }
                      ]]>
                  </mx:Script>
              </mx:Application>

               


              Thanks and regards

                Vineet Osho

              • 4. Re: Why Event bubbling is needed in During Event life cycle?
                Flex harUI Adobe Employee

                Bubbling is used when the deepest child should have first chance.  Think of

                a nested set of scrollbars and a mousewheel event.  The innermost child

                should get the chance to process the scroll event first.

                 

                Capture phase is used to monitor events in the children.  Windows has a

                similar feature with the MouseCapture API.

                1 person found this helpful
                • 5. Re: Why Event bubbling is needed in During Event life cycle?
                  vineet osho Level 1

                  Hi Thanks For your quick reply but can you elaborate the

                  example that i posted above.

                  just test that sample and tell me why this happened.

                   

                  Waiting for reply

                  vineet osho

                  • 7. Re: Why Event bubbling is needed in During Event life cycle?
                    BhaskerChari Level 4

                    Hi vineet osho,

                     

                    The events are always a bit tricky and confusing...if you get with it in the initial stages only then you feel very comfortable working with them.

                     

                    Let me explain the example you posted...

                     

                    Case 1:

                    In your example you added the eventListener on your mainContainer as below...

                     

                    mainContainer.addEventListener(MouseEvent.CLICK,clickHandler,true,0,true);

                    So you have added the eventListener to have the useCapture parameter to true...That means you can only listen the events on mainContainer in capture phase only....So if you click on mainContainer you cannot capture the event the reason is because since you have added useCapture to be true which means the event object flows from Application to Container and not back from  Container to Application(Since the listner is active only in capture phase) Here the event Object doesn't go down to the button inside the Box container, since the target here is mainContainer so it will flow only from Application to Container. So the moral here is you cannot listen for the events registered on the target(in this case the mainContainer) with useCapture set to true. But if you set useCapture to false(which is by default false) you can listen to this event Since the event object now flows from mainContainer->Application.

                     

                    Case 2:

                     

                    Say if you clicked on either box or btn with useCapture set to true then you can listen to this event, this is because now here the target is either box or btn on which ever one you clicked. Here the target is the one which dispatched the event So in this case the target is either box/btn on which you clicked.

                    So now the event object flows in the way ...Application->mainContainer->box->btn and since now the event object flows through the mainContainer and reaches down through the box.btn you can listen for this event on mainContainer(as the event Object passes through the mainContainer and flows to its children) so you can listen to this event on mainContainer. In contrary to this in earliar case the event Object flows from

                    Application->mainContainer so here the target is mainContainer and the event object stops at Application itself you cannot listen for this event.

                     

                     

                    Say if you take another case as below where I registered an eventListener on btn with useCapture set to true then I cannot listen for this event registered on button as here the target is button and useCapture set to true so you cannot listen for this event as I explained above. So the moral here is you cannot listen for events on the target with useCapture set to true.

                    btn.addEventListener(MouseEvent.CLICK,clickHandler,true,0,true);

                    Hope you get a clear idea of whats happening with this...If you have any doubts please let me know. Try to play with them by changing the listener and useCapture parameter.

                     

                    Thanks,

                    Bhasker