Using event listeners with components

When you work with components, you have a slightly different event-listener syntax. Components generate events, and you must specifically listen for these events by using either a listener object or a custom function.

The following example shows how you can use event listeners to monitor the download progress of a dynamically loaded image.

To listen for Loader component events:

Drag an instance of the Loader component onto the Stage from the Components panel.
Select the loader, and type my_ldr in the Instance Name text box in the Property inspector.
Add the following code to Frame 1 of the main Timeline;
```
System.security.allowDomain("http://www.helpexamples.com");

var loaderListener:Object = new Object();
loaderListener.progress = function(evt_obj:Object):Void {
    trace(evt_obj.type); // progress
    trace("\t" + evt_obj.target.bytesLoaded + " of " + evt_obj.target.bytesTotal + " bytes loaded");
}
loaderListener.complete = function(evt_obj:Object):Void {
    trace(evt_obj.type); // complete
}

my_ldr.addEventListener("progress", loaderListener);
my_ldr.addEventListener("complete", loaderListener);
my_ldr.load("http://www.helpexamples.com/flash/images/image1.jpg");
```
This ActionScript code defines a listener object named loaderListener, which listens for two events: progress and complete. When each of these events are dispatched, their code is executed, and debugging text is displayed in the Output panel if you test the SWF file in the authoring tool.

Next you tell the my_ldr instance to listen for each of the two specified events (progress and complete) and specify the listener object or function to execute when the event is dispatched. Finally, the Loader.load() method is called, which triggers the image to begin downloading.
Select Control > Test Movie to test the SWF file.
The image downloads into the Loader instance on the Stage, and then several messages are displayed in the Output panel. Depending on the size of the image you download, and if the image was cached on the user's local system, the progress event might be dispatched numerous times, whereas the complete event is only dispatched after the image is completely downloaded.

When you work with components and dispatch events, the syntax is slightly different from the event listeners in previous examples. Most notably, you must use the addEventListener() method instead of calling addListener(). Secondly, you must specify the specific event you want to listen for as well as the event listener object or function.

Instead of using a listener object, as in the first procedure under Using event listeners with components, you can use a custom function. The code in the previous example could be rewritten as follows: