11
Nov
07

Event Listener Priority

The familiar format we've used for event listeners includes five parameters.

//btn.addEventListener(eventType, listenerFunction, useCapture, priority,
//                     useWeakReference);
btn.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);

The first and second parameters are mandatory, and are the event type and function that is called when the listener is triggered. The third, fourth, and fifth parameters are optional. The third determines the event phase used (see "Event Phases in Action" for more information), and the last specifies whether or not a weak reference is used (see "Garbage Collection" on page 47 of the book for more information).

The fourth parameter, however, is an integer that sets the priority of the listener. Because a single object can use multiple listeners for the same event, it is sometimes useful to specify the order in which the similar listeners are executed.

The default value for the priority parameter is 0. If the optional parameter is omitted, all listeners will have a value of 0 and events will be handled in the order in which they were added. If unique integers are used, the listener with the highest priority will be executed first, and so on down the line.

The below code snippet uses the priority parameter to execute the events in the opposite order in which they were added:

ActionScript 3.0:
  1. var btn:Sprite = new Sprite();
  2. btn.graphics.beginFill(0);
  3. btn.graphics.drawCircle(0,0,10);
  4. btn.x = btn.y = 100;
  5. addChild(btn);
  6.  
  7. btn.addEventListener(MouseEvent.MOUSE_DOWN, onPriority0, false, 0);
  8. btn.addEventListener(MouseEvent.MOUSE_DOWN, onPriority1, false, 1);
  9. btn.addEventListener(MouseEvent.MOUSE_DOWN, onPriority2, false, 2);
  10.  
  11. function onPriority0(evt:Event):void {
  12.     trace("priority 0 event");
  13. }
  14.  
  15. function onPriority1(evt:Event):void {
  16.     trace("priority 1 event");
  17. }
  18.  
  19. function onPriority2(evt:Event):void {
  20.     trace("priority 2 event");
  21. }

This will trace:

priority 2 event
priority 1 event
priority 0 event

While it is not common for objects to have multiple listeners listening for the same event, if that need arises, you can still control their execution order using the priority parameter. For example, you may require that an initialization routine execute prior to another function. We'll revisit this topic again in future posts, so check back periodically if you're interested in this topic.

Print This Post Print This Post


10 Responses to “Event Listener Priority”


  1. 1 Jeff Jan 14th, 2009 at 8:07 am

    When removing a listener that includes the third, fourth, and fifth parameters (see book p.47), is it best practice to include those parameter in the removal statement? For example:
    btn.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);
    btn.removeEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);

    or can you exclude the last three parameters like this:
    btn.removeEventListener(MouseEvent.CLICK, onBtnClick);

  2. 2 Rich Jan 14th, 2009 at 8:15 am

    @Jeff, no that will actually cause an error. The removeEventListener() method only accepts two parameters: the event and the function called when the event is trapped. These are used in combination to identify the correct listener for removal.

    The capturePhase, priority, and weakReference parameters are only used when registering the listener.

  3. 3 Chuck Uebele Feb 2nd, 2009 at 9:03 pm

    How would you handle triggering an event when you are waiting for listeners to trigger? For example: in a photo gallery that is XML based, the new image is loading while the old image is fading from the stage. I want to make sure that both the image is loaded and the old image has faded before fading in the new image. The listeners are attached to the loader and one to a sprite that grays out a section of the stage.

  4. 4 Rich Feb 3rd, 2009 at 12:20 am

    @Chuck: First, you can easily sequence events. The first event listener can dispatch an event to another listener. In your case, however, it sounds like you probably need to wait for two independent events because you may not know which event completes first. In that case, the most straight forward thing is to check a property related to the other process (upon loading, is the alpha 0; and upon alpha==0, is the image loaded?)

    Or, in more complex scenarios, you can set flags that indicate what has been completed. For example, if you need to load/fade 10 images, you can set values in an array after each event is dispatched, checking on the status of the array every time. Therefore, after the last event is received, the array will be chock full and you're good to go.

    I'm sure there are other approaches, too.

  5. 5 Fluena Jun 9th, 2009 at 8:56 pm

    Is there a way to pass an argument to a function that I call from event listener?

  6. 6 Rich Jun 9th, 2009 at 9:42 pm

    @Fluena, yes, using a custom class.

  7. 7 Razvi Aug 12th, 2009 at 1:47 pm

    Just wanted to say thanks for reminding me of the priority parameter. Helped me a lot

  8. 8 Triynko Apr 26th, 2010 at 11:43 pm

    @Rich: No, the removeEventListener method takes three (3) parameters, and must include the event phase in order to properly unregister the event. Passing only two parameters will result in an error.

  9. 9 Rich Apr 27th, 2010 at 1:50 am

    @Triynko, removeEventListener() requires two parameters: type:String and listener:Function. (See Adobe LiveDocs.) The third parameter, useCapture:Boolean is optional, and is false by default. It is only needed when you must remove a listener that uses the capture phase.

  10. 10 Rich Apr 27th, 2010 at 1:51 am

    @Razvi, glad to be of help!

Leave a Reply




Speaking



Archives