带有prototype.js的类实例上的事件答案

【问题标题】：Events on an instance of a class with prototype.js带有prototype.js的类实例上的事件
【发布时间】：2012-03-01 23:44:40
【问题描述】：

使用 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);)

【问题讨论】：

标签： javascript class events event-handling prototypejs

【解决方案1】：

Prototype 的自定义事件是绑定的 DOM 事件，因此如果不以某种方式使用 DOM，就无法在类或实例上触发事件。也就是说，您可以使用 Prototype 的自定义事件将自定义事件添加到您的类中，而无需太多额外的工作。

几年前Tobie Langel分享了@987654321@；这种方法的缺点是这些事件是在类级别触发和观察的，这意味着由一个实例触发的事件会被所有观察该类的任何实例的侦听器拾取。

我对 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.
});

【讨论】：