Ext的事件管理非常強大。主要定義在Ext.EventManager對象(單例模式)中。該對象有以下方法
addListener
removeListener
removeAll
getListeners
purgeElement
_unload
onDocumentReady
on
un
stoppedMouseDownEvent
on / un 是 addListener / removeListener的快捷方式 。
stoppedMouseDownEvent 是 Ext.util.Event 類的實例對象，這個類定義在Observable.js中。
stoppedMouseDownEvent 在Ext.EventObject 類中用到。
使用Ext.EventManager.on添加事件很簡單
<p id="p1" style="background:gold;">
HELLO
</p>
<script type="text/javascript">
var p1 = document.getElementById('p1');
function f1(){alert(this)}
Ext.EventManager.on(p1,'click',f1);
</script>
這樣就為段落P添加了一個單擊事件。默認情況下執行上下文就是HtmlElement自身。當然可以使用第四個參數scope指定上下文。
<script type="text/javascript">
var p1 = document.getElementById('p1');
function f1(){alert(this)}
Ext.EventManager.on(p1,'click',f1,window);
</script>
第五個參數是個對象，屬性介紹分別如下：
scope ： 可指定執行上下文
delegate ：事件代理
stopEvent ：阻止冒泡和默認行為
preventDefault ：阻止默認行為
stopPropagation ：停止事件冒泡
normalized ： 僅傳原生事件對象
delay ：延遲執行
single : 僅執行一次
buffer ：延遲執行，多次時最后一次覆蓋前一次
target : 指定在父元素上執行
下圖是Ext.EventManager.addListener的詳細接口說明
下面看看源碼是如何實現的
addListener : function(element, eventName, fn, scope, options){
if(Ext.isObject(eventName)){
var o = eventName, e, val;
for(e in o){
val = o[e];
if(!propRe.test(e)){
if(Ext.isFunction(val)){
// shared options
listen(element, e, o, val, o.scope);
}else{
// individual options
listen(element, e, val);
}
}
}
} else {
listen(element, eventName, options, fn, scope);
}
},
可以看到其中調用私有 listen 函數，但存在三種分支情況。暫且考慮第三者情況listen(element, eventName, options, fn, scope);
listen 函數定義如下
function listen(element, ename, opt, fn, scope){
var o = !Ext.isObject(opt) ? {} : opt,
el = Ext.getDom(element), task;
fn = fn || o.fn;
scope = scope || o.scope;
if(!el){
throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
}
function h(e){
// prevent errors while unload occurring
if(!Ext){// !window[xname]){ ==> can't we do this?
return;
}
e = Ext.EventObject.setEvent(e);
var t;
if (o.delegate) {
if(!(t = e.getTarget(o.delegate, el))){
return;
}
} else {
t = e.target;
}
if (o.stopEvent) {
e.stopEvent();
}
if (o.preventDefault) {
e.preventDefault();
}
if (o.stopPropagation) {
e.stopPropagation();
}
if (o.normalized) {
e = e.browserEvent;
}
fn.call(scope || el, e, t, o);
};
if(o.target){
h = createTargeted(h, o);
}
if(o.delay){
h = createDelayed(h, o, fn);
}
if(o.single){
h = createSingle(h, el, ename, fn, scope);
}
if(o.buffer){
task = new Ext.util.DelayedTask(h);
h = createBuffered(h, o, task);
}
addListener(el, ename, fn, task, h, scope);
return h;
};
比較長，執行流程如下
1，options參數未傳，使用空對象{}。(接口的第5個參數)
2，通過Ext.getDom獲取HTMLElement元素(接口的第1個參數)。
3， 響應函數先取fn(接口的第3個參數)，沒傳則取opt.fn上。
4， 執行上下文先取scope(接口的第4個參數)，沒有則取opt.scope。
5，el不存在，拋異常
6， 內部函數h包裝了客戶端傳入的函數fn，將原生事件對象偷偷轉換成Ext包裝后的事件對象Ext.EventObject。依次根據所傳opt參數進行對應的操作。最后一句是核心
fn.call(scope || el, e, t, o);
響應函數fn真正的執行。
7， 根據opt參數進行對應的操作：o.target，o.delay，o.single和o.buffer。
8， 調用私有的addListener函數。
私有的addListener定義如下：
/// There is some jquery work around stuff here that isn't needed in Ext Core.
function addListener(el, ename, fn, task, wrap, scope){
el = Ext.getDom(el);
var id = getId(el),
es = Ext.elCache[id].events,
wfn;
wfn = E.on(el, ename, wrap);
es[ename] = es[ename] || [];
/* 0 = Original Function,
1 = Event Manager Wrapped Function,
2 = Scope,
3 = Adapter Wrapped Function,
4 = Buffered Task
*/
es[ename].push([fn, wrap, scope, wfn, task]);
// this is a workaround for jQuery and should somehow be removed from Ext Core in the future
// without breaking ExtJS.
if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
var args = ["DOMMouseScroll", wrap, false];
el.addEventListener.apply(el, args);
Ext.EventManager.addListener(WINDOW, 'unload', function(){
el.removeEventListener.apply(el, args);
});
}
if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
}
};
該函數中最重要一句
wfn = E.on(el, ename, wrap);
E.on 是 Ext.lib.Event.on，即 第四篇 提到的事件的低級封裝。
此外將返回對象wfn存在數組中。整個Ext添加事件的調用流程就是如此。