Objects

The technique for specifying certain actions to perform in response to particular events is known as event handling . When you are writing ActionScript code to perform event handling, there are three important elements you’ll want to identify:

• The event source: Which object is the one the event is going to happen to? For example, which button was clicked, or which Loader object is loading the image? The event source is also known as the event target . It has this name because it’s the object where the computer targets the event (that is, where the event actually happens).

• The event: What is the thing that is going to happen, the thing that you want to respond to? The specific event is important to identify, because many objects trigger several events.

• The response: What steps do you want performed when the event happens?

Any time you write ActionScript code to handle events, it requires these three elements. The code follows this basic structure (elements in bold are placeholders you’d fill in for your specific case):

function eventResponse(eventObject:EventType):void 
{ 
    // Actions performed in response to the event go here. 
} 
  
eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);

This code does two things. First, it defines a function, which is the way to specify the actions you want performed in response to the event. Next, it calls the addEventListener() method of the source object. Calling addEventListener() essentially “subscribes” the function to the specified event. When the event happens, the function’s actions are carried out. Consider each of these parts in more detail.

A function provides a way for you to group actions with a single name that is like a shortcut name to carry out the actions. A function is identical to a method except that it isn’t necessarily associated with a specific class. (In fact, the term “method” could be defined as a function that is associated with a particular class.) When you're creating a function for event handling, you choose the name for the function (named eventResponse in this case). You also specify one parameter (named eventObject in this example). Specifying a function parameter is like declaring a variable, so you also have to indicate the data type of the parameter. (In this example, the parameter's data type is EventType .)

Each type of event that you want to listen to has an ActionScript class associated with it. The data type you specify for the function parameter is always the associated class of the specific event you want to respond to. For example, a click event (triggered when the user clicks an item with the mouse) is associated with the MouseEvent class. To write a listener function for a click event, you define the listener function with a parameter with the data type MouseEvent. Finally, between the opening and closing curly brackets ( { ... } ), you write the instructions you want the computer to carry out when the event happens.

The event-handling function is written. Next you tell the event source object (the object that the event happens to, for example the button) that you want it to call your function when the event happens. You register your function with the event source object by calling the addEventListener() method of that object (all objects that have events also have an addEventListener() method). The addEventListener() method takes two parameters:

• First, the name of the specific event you want to respond to. Each event is affiliated with a specific class. Every event class has a special value, which is like a unique name, defined for each of its events. You use that value for the first parameter.

• Second, the name of your event response function. Note that a function name is written without parentheses when it’s passed as a parameter.

The following is a step-by-step description of the process that happens when you create an event listener. In this case, it’s an example of creating a listener function that is called when an object named myButton is clicked.

The actual code written by the programmer is as follows:

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

Here is how this code would actually work when it’s running:

1. When the SWF file loads, the computer makes note of the fact that there’s a function named eventResponse() .

   View full size graphic

2. The computer then runs the code (specifically, the lines of code that aren’t in a function). In this case that’s only one line of code: calling the addEventListener() method on the event source object (named myButton ) and passing the eventResponse function as a parameter.

   View full size graphic

   Internally, myButton keeps a list of functions that are listening to each of its events. When its addEventListener() method is called, myButton stores the eventResponse() function in its list of event listeners.

   View full size graphic

3. At some point, the user clicks the myButton object, triggering its click event (identified as MouseEvent.CLICK in the code).

   

   At that point, the following occurs:

   1. An object is created that’s an instance of the class associated with the event in question (MouseEvent in this example). For many events, this object is an instance of the Event class. For mouse events, it is a MouseEvent instance. For other events, it is an instance of the class that’s associated with that event. This object that’s created is known as the event object , and it contains specific information about the event that happened: what type of event it is, where it happened, and other event-specific information if applicable.

      View full size graphic

   2. The computer then looks at the list of event listeners stored by myButton . It goes through these functions one by one, calling each function and passing the event object to the function as a parameter. Since the eventResponse() function is one of myButton ’s listeners, as part of this process the computer calls the eventResponse() function.

      View full size graphic

   3. When the eventResponse() function is called, the code in that function runs, so your specified actions are carried out.

      View full size graphic

Here are a few more concrete examples of event handling code. These examples are meant to give you an idea of some of the common event elements and possible variations available when you write event-handling code:

• Clicking a button to start the current movie clip playing. In the following example, playButton is the instance name of the button, and this is a special name meaning “the current object”:

  this.stop(); 
   
  function playMovie(event:MouseEvent):void 
  { 
      this.play(); 
  } 
   
  playButton.addEventListener(MouseEvent.CLICK, playMovie);

• Detecting typing in a text field. In this example, entryText is an input text field, and outputText is a dynamic text field:

  function updateOutput(event:TextEvent):void 
  { 
      var pressedKey:String = event.text; 
      outputText.text = "You typed: " + pressedKey; 
  } 
   
  entryText.addEventListener(TextEvent.TEXT_INPUT, updateOutput);

• Clicking a button to navigate to a URL. In this case, linkButton is the instance name of the button:

  function gotoAdobeSite(event:MouseEvent):void 
  { 
      var adobeURL:URLRequest = new URLRequest("http://www.adobe.com/"); 
      navigateToURL(adobeURL); 
  } 
   
  linkButton.addEventListener(MouseEvent.CLICK, gotoAdobeSite);