Ext架构分析(2)--理解Ext.util.Observable

Observable维护了一个events数组，并提供了更加方便的对于事件的封装和调用机制。同Event一样，它也提供了addListener、removeListener方法。它提供的addListenere方法使用起来更加方便,你可以通过json对象一次实现多个事件的绑定：

foo.addListener({ 
'click' : { 
  fn: this.onClick, 
  scope: this, 
  delay: 100 
}, 
'mouseover' : { 
  fn: this.onMouseOver, 
  scope: this 
}, 
'mouseout' : { 
  fn: this.onMouseOut, 
  scope: this 
} 
}) 

如果你看一下源程序，你会发现，实际上，observable最终还是把事件绑定机制委托到Event对象上：

addListener : function(eventName, fn, scope, o){ 
    //如果参数是一个json对象 
    if(typeof eventName == "object"){ 
    o = eventName; 
    for(var e in o){ 
      if(this.filterOptRe.test(e)){ 
        continue; 
      } 
      if(typeof o[e] == "function"){ 
        // shared options 
        this.addListener(e, o[e], o.scope, o); 
      }else{ 
        // individual options 
        this.addListener(e, o[e].fn, o[e].scope, o[e]); 
      } 
    } 
    return; 
  } 
  o = (!o || typeof o == "boolean") ? {} : o; 
  eventName = eventName.toLowerCase(); 
  var ce = this.events[eventName] || true; 
  if(typeof ce == "boolean"){ 
    //事件不存在则新建一个Event对象并把它纳入event数组 
    ce = new Ext.util.Event(this, eventName); 
    this.events[eventName] = ce; 
  } 
  //调用event的addListener方法 
  ce.addListener(fn, scope, o); 
} 

除了支持addListener方法，Obserable还提供了一个addEvent方法，通过该方法，Observable可以绑定多个不包含处理句柄的Event对象：
 

addEvents : function(o){
    if(!this.events){
        this.events = {};
    }
    if(typeof o == 'string'){
        for(var i = 0, a = arguments, v; v = a; i++){
          if(!this.events[a]){
            o[a] = true;
          }
        }
    }else{
        Ext.applyIf(this.events, o);
    }
  },

为了方便使用，observable对addListener和removeListener提供了一个更加简洁的所写：on和un：
Ext.util.Observable.prototype.on = Ext.util.Observable.prototype.addListener;
Ext.util.Observable.prototype.un = Ext.util.Observable.prototype.removeListener;

你可以通过suspendEvents和resumeEvents方法随时对于事件进行暂停和继续：

suspendEvents : function(){ 
  this.eventsSuspended = true; 
}, 
resumeEvents : function(){ 
  this.eventsSuspended = false; 
}, 

当然，通过fireEvent方法,你可以触发制定的事件：

fireEvent : function(){ 
  if(this.eventsSuspended !== true){ 
    //arguments[0]就是你需要触发的事件 
    var ce = this.events[arguments[0].toLowerCase()]; 
    if(typeof ce == "object"){ 
      return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1)); 
    } 
  } 
  return true; 
}, 

Observable还通过capture和releaseCapture提供了对于事件处理函数的拦截机制：

Ext.util.Observable.capture = function(o, fn, scope){ 
o.fireEvent = o.fireEvent.createInterceptor(fn, scope); 
}; 
Ext.util.Observable.releaseCapture = function(o){ 
o.fireEvent = Ext.util.Observable.prototype.fireEvent; 
};