如何将事件处理程序添加到JavaScript中的对象的原型中

Question

var MyObj = function(h,w){ 
    this.height = h; 
    this.width = w; 
} 

我想为此对象的所有实例注册一些事件处理程序。

说例如我想要一个关闭按钮，当用户点击按钮，它应该关闭该特定的对象。

那么如何添加eventhandlers到它的原型，以便我可以即时创建这些对象。

Answer 1

事件处理程序几乎只是在适当的时候调用时才运行的函数。这听起来像你想要另一个对象（即：一个按钮）来响应一个事件，然后关闭你的对象。在这种情况下，按钮是事件监听器，而不是您的对象，因此您可能只需将按钮的onclick处理程序设置为对象实例上适当的关闭函数。

如果你真的想扭转它的其他方式，你可以做很简单的东西，像这样：

var MyObj = function(h,w){ 
    this.height = h; 
    this.width = w; 

    this.close = function(){ /** Do close */ } 
    this.addCloser = function(closebutton){ closebutton.onclick = this.close(); } 
} 

这将被用于像这样：

var myo = new MyObj(); 
myo.addCloser(document.getElementById('mybutton')); 

但是，如果你想你的对象产生的事件在注册处理函数被应用的时候，你可能想要做一些更复杂的事情，像这样：

var MyObj = function(h,w){ 
    this.height = h; 
    this.width = w; 
    this.handlers = {}; 
    this.events = ['close', 'beforeclose']; 

    this.beforeClose = function(){ 
     for(var i = 0, l = this.handlers.beforeclose.length; i < l; i++){ 
      this.handlers.beforeclose[i].call(this); 
     } 
    } 

    this.afterClose = function(){ 
     for(var i = 0, l = this.handlers.close.length; i < l; i++){ 
      this.handlers.close[i].call(this); 
     } 
    } 

    this.close = function(){ this.beforeClose(); /**Do close */ this.afterClose(); } 
    this.registerHandler = function(type, func){ 
     if(this.events.indexOf(type) == -1) throw "Invalid Event!"; 
     if(this.handlers[type]){ 
      this.handlers[type].push(func); 
     } else { 
      this.handlers[type] = [func]; 
     } 
    } 



} 

或什么的，这可能是像这样使用：

var myo = new MyObj(); 
myo.registerHandler('beforeclose', function(){alert("I'm closing!");});