Event Handlers versus Event Listeners

A number of ActionScript classes feature something called events. An event is raised by an object when a certain occurrence happens. For example, when someone hovers over a button symbol in a SWF, the Button.onRollOver event is raised for that particular Button instance. When the mouse is moved elsewhere, the Button.onRollOut event is raised for that same instance. These events take place whether or not anyone takes notice. If you want to actually do something in response to an event, you must manage it with an event handler or an event listener. The choice between these two is determined by the object — some objects expect handlers, some listeners — so hit the ol’ ActionScript Language Reference when in doubt. Handlers are relatively easy, but for some reason, listeners seem to perplex people at first. Let’s take a look at both.

Event Handlers

The most popular events probably belong to the Button and MovieClipclasses, which happen to share many of the same (a movie clip can be a button, but not the other way around).  To handle the Button.onRelease event, all you have to do is drag a button symbol to the Stage and give it an instance name via the Properties inspector.  Use this name in a frame script to assign a function to the event.

myButton.onRelease = function() {
  // do something
}

The other Button events work the same way, as do the MovieClip events and all events that require event handlers.

Any number of events can be handled.  Just assign a function to each event, as necessary.  A button that responds to a roll over, release, and roll out, for example, might look like this …

myButton.onRollOver = function() {
  // do something
}
myButton.onRelease = function() {
  // do something
}
myButton.onRollOut = function() {
  // do something
}

Event Listeners

Managing event listeners requires a few more steps.  A listener is accomplished with a generic Object instance.  This object acts as a liaison between at least two others:  the object that raises the event, and any objects listening for the event.  Let’s look at a MovieClipLoaderexample.

var mcl:MovieClipLoader = new MovieClipLoader();

At this point, we’ve declared a variable, mcl, that points to an instance of MovieClipLoader.  Now we’ll declare another variable, mclListener, that points to an instance of Object.  (Sounds funny, I know, but we’re creating an Object object.)

var mclListener:Object = new Object();

This generic object will now become our liaison.  At this point, the code looks very similar to the event handler approach.

mclListener.onLoadInit = function() {
  // do something
}

I could have picked any event from the MovieClipLoader class, it really doesn’t matter.  The thing to notice here is that a generic object is handling the event on behalf of the operative class instance.  With event handlers, the operative class instance handles its own events.

Now that we have our listener, and now that a function has been assigned to one of its events on behalf of our MovieClipLoader instance, we simply need to subscribe the listener to mcl.

mcl.addListener(mclListener);

Done.  Let’s see that all in one take:

var mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();
mclListener.onLoadInit = function() {
  // do something
}
mcl.addListener(mclListener);

To listen for more than one event, just follow suit with the event handler approach.

var mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();
mclListener.onLoadStart = function() {
  // do something
}
mclListener.onLoadProgress = function() {
  // do something
}
mclListener.onLoadInit = function() {
  // do something
}
mcl.addListener(mclListener);