Flash CS3 Documentation

Using ActionScript 2.0 Components > Handling Component Events > Using listeners to handle events > About scope in listeners

About scope in listeners

Scope refers to the object within which a function executes. Any variable references within that function are recognized as properties of that object. You can use the Delegate class to specify the scope of a listener. For more information, see Delegating events.

As discussed earlier, you register a listener with a component instance by calling addEventListener(). This method takes two parameters: a string indicating the name of the event, and a reference to either an object or a function. The following table lists the scope of each parameter type:

If you pass addEventListener() an object, the callback function assigned to that object (or the function defined on that object) is invoked in the scope of the object. This means that the keyword this, when used inside the callback function, refers to the listener object, as follows:

var lo:Object = new Object();
lo.click = function(evt){
    // this refers to the object lo
    trace(this);
}
myButton.addEventListener("click", lo);

However, if you pass addEventListener() a function, the function is invoked in the scope of the component instance that calls addEventListener(). This means that the keyword this, when used inside the function, refers to the broadcasting component instance. This causes a problem if you're defining the function in a class file. You cannot access the properties and methods of the class file with the expected paths because this doesn't point to an instance of the class. To work around this problem, use the Delegate class to delegate a function to the correct scope. See Delegating events.

The following code illustrates the scoping of a function when passed to addEventListener() in a class file. To use this code, copy it into an ActionScript (AS) file named Cart.as. Create a Flash (FLA) file with a Button component, myButton, and a DataGrid component, myGrid. Select both components on the Stage and press F8 to convert them into a new symbol named Cart. In the Linkage properties for the Cart symbol, assign it the class Cart.

class Cart extends MovieClip {

    var myButton:mx.controls.Button;
    var myGrid:mx.controls.DataGrid;

    function myHandler(eventObj:Object){

    // Use the eventObj parameter 
    // to capture the event type.
        if (eventObj.type == "click"){

        /* Send the value of this to the Output panel.
        Because myHandler is a function that is not defined 
        on a listener object, this is a reference to the 
        component instance to which myHandler is registered
        (myButton). Also, since this doesn't reference an 
        instance of the Cart class, myGrid is undefined. 
        */ 
            trace("this: " + this);
            trace("myGrid: " + myGrid);
        }
    }

    // register the myHandler function with myButton
    // when the button is clicked, myHandler executes

    function onLoad():Void{
        myButton.addEventListener("click", myHandler);
    }
}

Flash CS3