读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添加事件的调用流程就是如此..
?