ExtJs源码分析与学习—ExtJs事件机制（三）
这篇讲ExtJs对事件的管理和调用
?
????? ExtJs对事件的管理非常强大，主要定义在Ext.EventManager对象(单例模式)中。先看注册事件监听方式，ExtJs提供了几种方式来注册元素监听函数
通过Ext.EventManager.addListener/on函数来为指定元素的某种事件注册监听函数。例如：Ext.EventManager.on('test1','click',clickMe,this);// clickMe是要执行的函数通过ExtJs 元素的on函数来为自身注册某种事件的监听处理函数。例如：具体来说可分为
??? 标准配置方式
el.on(eventName,fn,scope,options);
options参数是事件配置项，各项说明如下：
scope ： 可指定执行上下文
delegate ：事件代理
stopEvent ：阻止冒泡和默认行为
preventDefault ：阻止默认行为
stopPropagation ：停止事件冒泡
normalized ： 仅传原生事件对象
delay ：延迟执行
single : 仅执行一次
buffer ：延迟执行，多次时最后一次覆盖前一次
target : 指定在父元素上执行
???私有配置多事件注册
el.on({'click'：{fn：this.onClick,scope:this,delay:100},
???? 'mouseover'：{fn：this.onMouseOver,scope:this},
???? …
??? });
? 共享配置多事件注册
el.on({'click':this. onClick,
???? 'mouseover':this.onMouseOver,
???? …,
???? scope:this});
?? 多元素多事件注册
Ext. addBehaviors({
'#foo a@click' : function(e, t){
??????? // do something
},
'#foo a, #bar span.some-class@mouseover' : function(){
??????? // do something
}
);
注意这种共享配置多事件注册监听函数只有两个参数，不能传递配置对象来进行配置，与前三种不同。
?
上述几种方式最终还是调用Ext.EventManager.addListener函数来注册监听的，该函数源代码如下：
?
?
在listen函数最后调用了私有函数addListener去注册事件监听函数
?
?
再看方法purgeElement : function(el, recurse, eventName)实现的功能是递归删除元素el以及el的子元素上已注册的事件
?? 参数 el 要删除事件对应的元素?
?? 参数 recurse 是否删除el子元素上的事件，true为是
?? 参数 eventName 已注册的事件名，如果没有传入eventName参数，默认则把删除所有的注册的事件?
?下面看该类中方法onDocumentReady，该方法的简写是Ext.onReady，该方法的功能是当Document准备好的时候触发传入的业务函数。源代码如下
?
function initDocReady(){ docReadyEvent || (docReadyEvent = new Ext.util.Event()); if (DETECT_NATIVE) {//对于基于 Gecko 、WebKit 和 Safari的浏览器进行等待处理，完全载入运行fireDocReady函数 DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false); } /* * Handle additional (exceptional) detection strategies here * 处理特殊的情况 */ if (Ext.isIE){//IE浏览器完全载入运行fireDocReady，使用readystatechange作为检测标志 //Use readystatechange as a backup AND primary detection mechanism for a FRAME/IFRAME //See if page is already loaded if(!checkReadyState()){ checkReadyState.bindIE = true; DOC.attachEvent('onreadystatechange', checkReadyState); } }else if(Ext.isOpera ){ /* Notes: * Opera需要特殊处理，需要判断css是否加载 Opera needs special treatment needed here because CSS rules are NOT QUITE available after DOMContentLoaded is raised. */ //See if page is already loaded and all styleSheets are in place (DOC.readyState == COMPLETE && checkStyleSheets()) || DOC.addEventListener(DOMCONTENTLOADED, OperaDOMContentLoaded, false); }else if (Ext.isWebKit){ //Fallback for older Webkits without DOMCONTENTLOADED support checkReadyState(); } // no matter what, make sure it fires on load // 最无奈的时候，通过load来触发fireDocReady事件 E.on(WINDOW, "load", fireDocReady);}?
接下来是两个自运行函数（闭包函数的处理）
initExtCss 初始化Ext Css，用来区分是何种浏览器或操作系统，加载到body上
supportTests 支持测试，怎么用不太明白?
?????? 以上是对Ext.EventManager代码中主要方法和功能的分析，至此完成了ExtJs对浏览器事件的封装与调用，接下来讲解ExtJs自定义事件的处理，即ExtJs组件事件。
