Using the Delegate class

The Delegate class lets you run a function in a specific scope. This class is provided so that you can dispatch the same event to two different functions (see Using ActionScript 2.0 Components), and so that you can call functions within the scope of the containing class.

When you pass a function as a parameter to EventDispatcher.addEventListener(), the function is invoked in the scope of the broadcaster component instance, not the object in which it is declared (see Using ActionScript 2.0 Components). You can use Delegate.create() to call the function within the scope of the declaring object.

The following example shows three methods of listening for events for a Button component instance. Each way that you add event listeners to a Button component instance results in the event being dispatched in a different scope.

To use the Delegate class to listen for events:

  1. Create a new Flash document and save it as delegate.fla.
  2. Drag a Button component from the User Interface folder of the Components panel to the library.

    You add and position the button instance on the Stage using ActionScript in a later step.

  3. Add the following ActionScript to Frame 1 of the main Timeline:
    import mx.controls.Button;
    import mx.utils.Delegate;
    
    function clickHandler(eventObj:Object):Void {
        trace("[" + eventObj.type + "] event on " + eventObj.target + " instance.");
        trace("\t this -> " + this);
    }
    
    var buttonListener:Object = new Object();
    buttonListener.click = function(eventObj:Object):Void {
        trace("[" + eventObj.type + "] event on " + eventObj.target + " instance.");
        trace("\t this -> " + this);
    };
    
    this.createClassObject(Button, "one_button", 10, {label:"One"});
    one_button.move(10, 10);
    one_button.addEventListener("click", clickHandler);
    
    this.createClassObject(Button, "two_button", 20, {label:"Two"});
    two_button.move(120, 10);
    two_button.addEventListener("click", buttonListener);
    
    this.createClassObject(Button, "three_button", 30, {label:"Three"});
    three_button.move(230, 10);
    three_button.addEventListener("click", Delegate.create(this, clickHandler));
    

    The preceding code is separated into six sections (each section is separated by a blank line). The first section imports the Button class (for the Button component) as well as the Delegate class. The second section of code defines a function that you call when the user clicks some of the buttons. The third section of code creates an object that you use as an event listener, and the object listens for a single event, click.

    The remaining three sections of code each create a new Button component instance on the Stage, reposition the instance, and add an event listener for the click event. The first button adds an event listener for the click event and passes a reference to a click handler function directly. The second button adds an event listener for the click event and passes a reference to a listener object, which contains a handler for the click event. Finally, the third function adds an event listener for the click event, uses the Delegate class to dispatch the click event in the this scope (where this equals _level0) and passes a reference to the click handler function.

  4. Select Control > Test Movie to test the Flash document.
  5. Click each button instance on the Stage to see which scope in which the event is handled.
    1. Click the first button on the Stage to trace the following text in the Output panel:
      [click] event on _level0.one_button instance.
           this -> _level0.one_button
      

      When you click one_button instance, the this scope refers to the button instance itself.

    2. Click the second button on the Stage to trace the following text in the Output panel:
      [click] event on _level0.two_button instance.
           this -> [object Object]
      

      When you click the two_button instance, the this scope refers to the buttonListener object.

    3. Click the third button on the Stage to trace the following text in the Output panel:
      [click] event on _level0.three_button instance.
           this -> _level0
      

      When you click the three_button instance, the this scope refers to the scope that you specify in the Delegate.create() method call, or in this case, _level0.