12 Replies Latest reply on Jun 10, 2009 7:33 AM by kglad

    Difficulty in understanding Event Listeners

    chinmayagoyal Level 1

      Hello,

      This may seem like a very easy question, but, I am having some difficulty in understanding event handlers/listeners.

      I have read the event handlers part of the adobe manual and couldn't completely understand it.

       

      Example: Can someone explain the steps taken in the below code.

       

       

      function eventResponse(event:MouseEvent):void
      {
          // Actions performed in response to the event go here.
      }

      myButton.addEventListener(MouseEvent.CLICK, eventResponse);


       

      In this what I have understood is:

      1. A function eventResponse is created with Mouse Event as a parameter. (Q. What does "event:" mean?)

      2. A method for button, "myButton" is used called addEventListener() taking 2 parameters.

      3. The second parameter of the method is the name of the function to be executed when a certain event happens.

      Q. What does the 1st parameter tell us?

      Q.Is there any relation between MouseEvent and eventResponse?

       

      Thanking You,

      Chinmaya

        • 1. Re: Difficulty in understanding Event Listeners
          kglad Adobe Community Professional & MVP

          (that's as3 code so you should post future questions about as3 in the as3 forum.)

           

          1.  event means the same in actionscript as it does in english:  it's something that happens - an outcome.  in the code you posted you considered a mouseevent.  mouseevents include clicks, rollovers, rollouts, dragovers etc.

           

          3.  the first parameter in addEventListener() specifies the type of event.  in your code, it was a click mouseevent.

           

          there's a relationship between MouseEvent.CLICK and the eventResponse() function only if you code for one (which you did).  in your code, if myButton detects a MouseEvent.CLICK, the function eventResponse() is called.

          • 2. Re: Difficulty in understanding Event Listeners
            chinmayagoyal Level 1

            Thank you for the reply.

            Sorry for posting in the wrong section.

            I thought that the code would be more or less the same for AS2 also.

             

            Just one more question- Q. In the parameters for the function, eventReponse, why have we written "event:Mouse". Is it necessary?

             

            Thanking You,

            Chinmaya

            • 3. Re: Difficulty in understanding Event Listeners
              Ned Murphy Adobe Community Professional & MVP

              The listener throws an argument to the handler function, so the handler function must accommodate receiving it.

               

              In AS3, when you pass an argument to a function, the type of the argument has to be defined.  For the example you used, "event" is a variable name given to the argument and MouseEvent is the class/type of the variable.  "event" could have been anything since it is a variable name... evt, e, cheese, etc  But alot of people use something relative to the word event, some using event itself.

              • 4. Re: Difficulty in understanding Event Listeners
                chinmayagoyal Level 1

                If "event" is a variable, what does it store when this code is executed?

                • 5. Re: Difficulty in understanding Event Listeners
                  kglad Adobe Community Professional & MVP

                  the particular mouseevent that triggered the function call.   that event has several properties.

                   

                  use the trace() function to see.  and don't be afraid to experiment a little and find things yourself:

                   

                  function eventResponse(event:MouseEvent){

                  trace(event);

                  }

                  • 6. Re: Difficulty in understanding Event Listeners
                    Rothrock Level 5

                    By the way here are a couple of tidbits that might help.

                     

                    In AS2 there are a few classes that dispatch events and use the addEventListener syntax, but most of them don't. That is one nice thing about AS3 is that they are all the same. So in AS2 it might look like this:

                     

                    function eventHandler (event:Object){}

                     

                    In AS2 though the events don't pass an instance of an Event (or MouseEvent) type back they just pass back a generic object. And that is really just what the Event types in AS3 are.

                     

                    A plain old object can have any old properties stuffed in and there is no way to check that it is proper and the correct object. So in AS3 they made some specific types of objects, with specific rules and codified those rules into the Event, MouseEvent, KeyboardEvent, etc. classes.

                     

                    Also the variable in that function signature could be any word you want you could do this:

                     

                    function someHandler(apples:Event){}

                     

                    But that isn't likely to help you later remember what it is or where it came from. Personally I generally just shorten it to "e" and I would recommend that you find something that you are comfortable with and stick with it. That way even give a little snippet of code you can recognize, "Oh this must have come from some event handler somewhere. hhmmmm, let me look for that."

                    • 7. Re: Difficulty in understanding Event Listeners
                      chinmayagoyal Level 1

                      Thank you for all your reply's.

                      Well,

                      This is what I have understood on the whole.

                       

                      The Object.addEventListener() listens for an event(event is parameter 1) and executes a function(parameter 2) if that event happens to the object.

                      We define the function seperately and use any variable name with the data type same as that used for the event for the argument.

                      So, what I have understood is that THE FUNCTION ARGUMENT IS JUST A RECHECK OF WHETHER WE ARE EXECUTING A VALID FUNCTION; or is it used for something else? Till now, I have only used arguments in a function to be used in the code of the function. Then, when we run the function, we can replace the arguments with any values(satisfying the data type of the argument) we want.

                       

                      Thanking You,

                      Chinmaya

                       

                      P.S. I used the trace command and it gave lots of properties for the mouseEvent that I was refering to.

                      • 8. Re: Difficulty in understanding Event Listeners
                        kglad Adobe Community Professional & MVP

                        that argument may not always be useful but, it often is useful:

                         

                        btn1.addEventListener(MouseEvent.MOUSE_OVER,overF);

                        btn2.addEventListener(MouseEvent.MOUSE_OVER,overF)

                        btn1.addEventListener(MouseEvent.MOUSE_OUT,outF);

                        btn2.addEventListener(MouseEvent.MOUSE_OUT,outF);

                         

                        function overF(e:MouseEvent){

                        e.currentTarget.scaleX=e.currentTarget.scaleY=1.5;

                        }

                        function outF(e:MouseEvent){

                        e.currentTarget.scaleX=e.currentTarget.scaleY=1;

                        }

                        • 9. Re: Difficulty in understanding Event Listeners
                          chinmayagoyal Level 1

                          Sorry for such a late reply.

                          I just have one more question that I need to ask. I think everything is totally clear except the function argument.

                           

                          Is the argument in the function a exception when it is used with eventListeners. I mean, is the argument used differently with events in comparison with normal functions? So, the argument stores information related to the event that has happened that triggered the function. Is this correct?

                           

                          Thanking You,

                          Chinmaya

                          • 10. Re: Difficulty in understanding Event Listeners
                            kglad Adobe Community Professional & MVP

                            yes and no.  arguments (or better, parameters) can be complex data types and therefore can carry a lot of information.  the event parameter is a complex data type and carries a lot of  information.

                            • 11. Re: Difficulty in understanding Event Listeners
                              chinmayagoyal Level 1

                              Thank You everyone,

                              I think I have finally got it.

                              I hope I havn't eaten up too much of your time.

                              Chinmaya