Observable维护了一个events数组,并提供了更加方便的对于事件的封装和调用机制。同Event一样,它也提供了addListener、removeListener方法。它提供的addListenere方法使用起来更加方便,你可以通过json对象一次实现多个事件的绑定:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
foo.addListener(
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
'click' :
{
fn: this.onClick,
scope: this,
delay: 100
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
'mouseover' :
{
fn: this.onMouseOver,
scope: this
},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
'mouseout' :
{
fn: this.onMouseOut,
scope: this
}
})
![](/Images/OutliningIndicators/None.gif)
如果你看一下源程序,你会发现,实际上,observable最终还是把事件绑定机制委托到Event对象上:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
addListener : function(eventName, fn, scope, o)
{
//如果参数是一个json对象
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(typeof eventName == "object")
{
o = eventName;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var e in o)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(this.filterOptRe.test(e))
{
continue;
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(typeof o[e] == "function")
{
// shared options
this.addListener(e, o[e], o.scope, o);
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
// individual options
this.addListener(e, o[e].fn, o[e].scope, o[e]);
}
}
return;
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
o = (!o || typeof o == "boolean") ?
{} : o;
eventName = eventName.toLowerCase();
var ce = this.events[eventName] || true;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(typeof ce == "boolean")
{
//事件不存在则新建一个Event对象并把它纳入event数组
ce = new Ext.util.Event(this, eventName);
this.events[eventName] = ce;
}
//调用event的addListener方法
ce.addListener(fn, scope, o);
}
![](/Images/OutliningIndicators/None.gif)
除了支持addListener方法,Obserable还提供了一个addEvent方法,通过该方法,Observable可以绑定多个不包含处理句柄的Event对象:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
addEvents : function(o)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(!this.events)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.events =
{};
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(typeof o == 'string')
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i = 0, a = arguments, v; v = a; i++)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(!this.events[a])
{
o[a] = true;
}
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
Ext.applyIf(this.events, o);
}
},
![](/Images/OutliningIndicators/None.gif)
为了方便使用,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方法随时对于事件进行暂停和继续:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
suspendEvents : function()
{
this.eventsSuspended = true;
},
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
resumeEvents : function()
{
this.eventsSuspended = false;
},
![](/Images/OutliningIndicators/None.gif)
当然,通过fireEvent方法,你可以触发制定的事件:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
fireEvent : function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(this.eventsSuspended !== true)
{
//arguments[0]就是你需要触发的事件
var ce = this.events[arguments[0].toLowerCase()];
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(typeof ce == "object")
{
return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));
}
}
return true;
},
![](/Images/OutliningIndicators/None.gif)
Observable还通过capture和releaseCapture提供了对于事件处理函数的拦截机制:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.util.Observable.capture = function(o, fn, scope)
{
o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
};
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.util.Observable.releaseCapture = function(o)
{
o.fireEvent = Ext.util.Observable.prototype.fireEvent;
};