Question

I’m porting an ActionScript application to JavaScript, and I’m trying to perfect my EventDispatcher implementation.

A recent problem I had is that the callbacks that I had attached weren’t being called with the correct this value. The way I temporarily fixed it was to add a third parameter to addEventListener with the context to be sent back, but this isn’t ideal as it doesn’t match the same prototype as the actionscript equivilant.

The other thing I tried is a this.callback -style function, but that has even more problems, especially with removeEventListener.

Is there a way to follow ActionScript’s event style in Javascript?

My current implentaton is attached below: (depends on jQuery / jQueryMX)

var EventDispatcher = jQuery.Class.extend({
  listeners: {},
  init: function() {
    this.listeners = {};
  },
  addEventListener: function(event, listener, context) {
    if (this.listeners.hasOwnProperty(event)) {
      this.listeners[event].push([listener,context]);
    } else {
      this.listeners[event] = [[listener,context]];
    }
  }, 
  hasEventListener: function() {
    console.error('hasEventListener unimplemented', arguments);
  },
  removeEventListener: function(event, listener) {
    if (this.listeners.hasOwnProperty(event)) {
      for (i in this.listeners[event]) {
        if (this.listeners[event][i][0] == listener) {
          this.listeners[event].splice(i,1);
          return true;
        }
      }
    } else {
      //console.log('no listener found for',event,listener,this);
      return false;
    }
  },
  dispatchEvent: function(event) {
    if (event.type && this.listeners.hasOwnProperty(event.type)) {    
      event.currentTarget = this;
      //console.log('dispatchEvent',event,this);
      for (i in this.listeners[event.type]) {
        if (typeof this.listeners[event.type][i][0] == 'function') {
          this.listeners[event.type][i][0].call(this.listeners[event.type][i][1],event);
        } 
      }
    } 
  }
});

Answer 1

Actionscript 3 and Javascript are fundamentally different languages. You might play around with arguments.callee in your addEventListener function and get some sort of approximation of the AS3 EventDispatcher interface, but it is not possible (or desirable) to match it exactly given the inherent differences between the two languages. The way we typically use EventDispatcher in AS3 relies upon the concept of a Bound Method, which does not exist at all in Javascript.

I’d say your current implementation is not only correct, but more powerful and safer than what you’ve been shooting for. By passing along and storing the context for each event listener, you’re constantly reminding yourself that you’re in Javascript, not actionscript, and you’re avoiding an entire class of pitfalls that goes along with neglecting the difference between Javascript’s function scope and AS3’s