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;
}
;
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); }
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; }
;
