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

时间:2012-01-06 08:40:51

标签: javascript javascript-events unobtrusive-javascript

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

我想为这个对象的所有实例注册一些eventhandler。

比如说我希望有一个关闭按钮,当用户点击按钮时,它应关闭该特定对象。

那么如何将eventhandlers添加到其原型中,以便我可以动态创建这些对象。

1 个答案:

答案 0 :(得分:3)

事件处理程序几乎就是在适当的时候调用时运行的函数。听起来你想要另一个对象(即:一个按钮)来响应一个事件,然后关闭你的对象。在这种情况下,按钮是事件监听器,而不是您的对象,因此您可能只需将按钮的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!");});