读Ext之九（事件管理）
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添加事件的调用流程就是如此。
