具有prototype.js的类的实例上的事件

时间:2012-02-09 13:46:14

标签: javascript class events event-handling prototypejs

使用Mootools,您可以将eventListener添加到类的实例中。 像这样:

var Widget = new Class({
    Implements: Events,
    initialize: function(element){
    // ...
    },
    complete: function(){
        this.fireEvent('complete');
    }
});

var myWidget = new Widget();
myWidget.addEvent('complete', myFunction);

是否有可能在原型上的实例链接上添加事件而不在文档上? (Event.observe(document,“evt:eventType”,eventHandler);)

1 个答案:

答案 0 :(得分:1)

Prototype的自定义事件是绑定的DOM事件,所以没有办法在不以某种方式使用DOM的情况下触发类或实例上的事件。也就是说,您可以使用Prototype的自定义事件向您的类添加自定义事件,而无需太多额外的工作。

几年前,Tobie Langel分享了a way of adding custom events to Prototype classes;这种方法的缺点是这些事件在类级别被触发和观察,这意味着一个实例触发的事件将被所有侦听器观察到该类的任何实例。

我对Tobie的方法进行了一些简单的修改,允许单独观察实例。这里的技巧是使用Class.create周围的闭包来为类的每个实例创建一个私有事件命名空间。每次创建类的新实例时,计数器都会递增。

var Observable = Class.create({
  fire : function(eventName, data){
    document.fire(this._namespace + ':' + eventName, data);
  },
  observe : function(eventName, callback){
    document.observe(this._namespace + ':' + eventName, callback);
  },
  stopObserving : function(eventName, callback) {
    // Probably wise to also implement this...
  }
});

var Widget = (function(){

  var namespace = 'widget', counter = 0;

  return Class.create(Observable, {
    initialize : function(){
      this._namespace = namespace + ':' + counter++;
    },
    complete : function(){
      this.fire('complete');
    }
  });

}());

var myWidget = new Widget();

myWidget.observe('complete', function(e){
  // Callback executed when 'complete' is fired on myWidget.
});