Skip navigation
ziggy067
Currently Being Moderated

I don't understand the keywords: this, event.target, event.currentTarget

Jul 11, 2008 9:53 AM

I am almost a complete beginner to Actionscript 3.0.
I've been looking at tutorials and I now understand most of the basic principles and methods of this programing language (creating basic functions ect..).

However I do not understand the following keywords.

1. this
2. event.target
3. event.currentTarget

What do these words refer to?
How are they different from each-other?
When must i use them?
 
Replies
  • Currently Being Moderated
    Jul 11, 2008 9:59 AM   in reply to ziggy067
    this refers to the current movie clip. for example if you want to add an item to the movie you can do:

    addChild(someitem);
    or you can do
    this.addChild(someitem);

    if you add a listener to a button like this, event is the function parameter, you can make it anything you want such as just e or evt or mySpecialVariableName

    mybutton.addEventListener(MouseEvent.CLICK, mouseClick);
    function mouseClick(event) {
    // event can be anything
    }
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 11, 2008 11:08 AM   in reply to ziggy067
    The 'this' keyword is used to refer to an instance of a class from within that class. Let's say you have a simple class MySimpleClass (refer to the code below):

    Quite often you may name a parameter, like 'orderNum' in the constructor of the class:
    public function MySimpleClass( orderNum:String)
    The name of this parameter could be the same as a private or protected variable (property) that is defined within this class. So in our example, this class variable is also named 'orderNum': private var orderNum:String

    Well, how do you differentiate between the two then? You use the 'this' keyword, so that 'this.orderNum' refers to the class variable defined by private var orderNum:String and you assign the value associated with the 'orderNum' parameter in the class constructor to that class variable.

    If you instantiate your class, you'll do something like:
    var mySimpleClass:MySimpleClass = new MySimpleClass("A324B6768");
    That's one example where you would use the 'this' keyword.

    'target' and 'currentTarget' are used like this:

    When you register an event listener using addEventListener with a component or the stage, that component or the stage becomes the currentTarget in the listener function:

    stage.addEventListener(MouseEvent.CLICK, onClick); //the stage will be the currentTarget

    Try this:
    Drag a button onto the stage. Give it an instance name of 'myButton' or something. Then add the example target/currentTarget code below to the main timeline frame script that the button was placed on. Publish the movie and you'll see the following:

    When you click on the stage only -
    » trace output for event.currentTarget will be the stage
    » trace output for event.target will be nothing

    When you click on the button only -
    » trace output for event.currentTarget will be the stage
    » trace output for event.target will be myButton

    You didn't have to add the event listener to the button, and yet it still can be referred to in the event handler (via event.target) that is associated with the stage. This is due to the way certain events are propagated through the event chain in AS3.

    Hope this helps.

    TS
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 12, 2008 6:23 AM   in reply to VarioPegged
    To expend on the previous replies:

    To understand e.target and e.currentTarget it is important to take into consideration event flow. Also, the difference between these two transpires mainly when objects are nested within each other in the display list.

    There are three phases in the event flow: capture, target and bubbling.

    Say, you have three nested display objects:

    sprite1 is the outmost objects;
    sprite2 is the child of sprite1 (it is nested inside sprite1)
    sprite3 is the child fo sprite2 (it is nested inside sprite2)

    Say, we register a listener that listens for a mouse click on sprite3 (the deepest nested objects) - we name the listener onMouseClick. With this hierarchy the following happens when you click on sprite3 - this is the key - the e.target of onMouseClick is sprite3:

    1. Capture phase - event flows from TOP to buttom

    a. The outmost object - sprite1 - is notified that sprite3 is clicked. currentTarget is sprite1, target is sprite3.
    b. Event flows one step DOWN to sprite2 (child of sprite1) - now currentTarget is sprite2; target is STILL sprite3

    2. Target phase
    Event flows one more step down - to sprite3: now currentTarget is sprite3 and target is sprite3. NOTE: both currentTarget and target are THE SAME - this is why it is called TARGET PHASE.

    3. Bubbling Phase - the event flows back from bottom back to the top.
    a. Event arrives one step UP - to sprite2 - now currentTarget is sprite2; target is STILL sprite3
    b. Event flows once more UP: now currentTarget is sprite1; target is sprite3.

    Notice that e.target never changes because it is where the event has originated. currentTarget changes depending on the phase of the event.

    This is a very nice thing to grasp because it makes code more efficient and centralized.

    Hope it helps.


    In addition:

    In a way, one can look at AS3 as an event based language. This perspective allows for a very efficient architecture, very specialized modularity (delegating to objects only functionality that they are needed for) and avoiding inconveniences of inheritance and composition approaches whenever they are not necessary.

    This is an elections year and I got to make political statements :-)
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)