ExtJs源码分析与学习—ExtJs事件机制（三）
这篇讲ExtJs对事件的管理和调用
ExtJs对事件的管理非常强大，主要定义在Ext.EventManager对象(单例模式)中。先看注册事件监听方式，ExtJs提供了几种方式来注册元素监听函数
- 通过Ext.EventManager.addListener/on函数来为指定元素的某种事件注册监听函数。例如：Ext.EventManager.on('test1','click',clickMe,this);// clickMe是要执行的函数
- 通过ExtJs 元素的on函数来为自身注册某种事件的监听处理函数。例如：
Ext.get('test1').on('click', clickMe,this,{preventDefault:true}); - 通过Ext.addBehaviors函数为多个元素的多个事件注册监听处理函数，该方法在ExtJs源码分析与学习—ExtJs核心代码扩展中已介绍过。
具体来说可分为
标准配置方式
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函数来注册监听的，该函数源代码如下：
/**
* 加入一个事件处理函数，方法{@link #on}是其简写方式。
* @param {String/HTMLElement} element 要分配的html元素或者其id。
* @param {String} eventName 事件处理函数的名称。
* @param {Function} fn 事件处理函数。该函数会送入以下的参数
* @param {Object} scope (optional) （可选的）事件处理函数执行时所在的作用域。处理函数“this”的上下文
* @param {Object} options (optional) （可选的） 包含句柄配置属性的一个对象。该对象可能会下来的属性：
* 调用addListener时送入的选项对象。
* <li>scope : Object 事件处理函数执行时所在的作用域。处理函数“this”的上下文环境。
* <li>delegate : String 一个简易选择符，用于过滤目标，或是查找目标的子孙。
* <li>stopEvent : Boolean true表示为阻止事件。即停止传播、阻止默认动作。
* <li>preventDefault : Boolean true表示为阻止默认动作。
* <li>stopPropagation : Boolean true表示为阻止事件传播。
* <li>normalized : Boolean false表示对处理函数送入一个原始、未封装过的浏览器对象而非标准的
* <li>delay : Number 触发事件后处理函数延时执行的时间。
* <li>single : Boolean true代表为下次事件触发加入一个要处理的函数，然后再移除本身。
* <li>buffer : Number 若指定一个毫秒数会把该处理函数安排到{@link Ext.util.DelayedTask}延时之后才执行。
*/
addListener : function(element, eventName, fn, scope, options){
if(typeof eventName == 'object'){//事件名为对象，说明采用配置多事件注册
var o = eventName, e, val;
for(e in o){
val = o[e];
if(!propRe.test(e)){//非标准模式下不能使用私有自定义的配置项，如options配置了{msg：'提示信息'}
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，源代码如下：
/**
* @param {} element 要注册监听事件的元素
* @param {} ename 事件名
* @param {} opt 配置项
* @param {} fn 监听函数
* @param {} scope 上下文（作用域）
* @return {}
*/
var listen = function(element, ename, opt, fn, scope){
var o = (!opt || typeof opt == "boolean") ? {} : opt;//配置对象
fn = fn || o.fn; scope = scope || o.scope; //监听函数和作用域
var el = Ext.getDom(element);//元素，封装为Ext.Element
if(!el){
throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
}
var h = function(e){//封装之后的监听函数，用来注册到元素的事件中
// prevent errors while unload occurring
if(!window[xname]){
return;
}
e = Ext.EventObject.setEvent(e);//把浏览器原生的事件封装为EventObject对象
var t;
if(o.delegate){//如果指定了delegate配置项，那么就按其指定找到代理事件源
t = e.getTarget(o.delegate, el);
if(!t){
return;
}
}else{
t = e.target;
}
if(o.stopEvent === true){
e.stopEvent();
}
if(o.preventDefault === true){
e.preventDefault();
}
if(o.stopPropagation === true){
e.stopPropagation();
}
if(o.normalized === false){
e = e.browserEvent;
}
fn.call(scope || el, e, t, o);//调用监听函数，如el.on(eventName,fn,scope,options);则此处调用fn，并传入e, t, o参数
};
if(o.target){
h = createTargeted(h, o);
}
if(o.delay){
h = createDelayed(h, o);
}
if(o.single){
h = createSingle(h, el, ename, fn, scope);
}
if(o.buffer){
h = createBuffered(h, o);
}
addListener(el, ename, fn, h, scope);//注册为DOM元素的某事件监听函数，及浏览器原生事件
return h;
};
在listen函数最后调用了私有函数addListener去注册事件监听函数
/**
* There is some jquery work around stuff here that isn't needed in Ext Core.
* @param {} el 要注册监听事件的元素，已封装为EventObject
* @param {} ename 事件名
* @param {} fn 监听函数
* @param {} task 延迟任务
* @param {} wrap 封装之后的监听函数
* @param {} scope 上下文（作用域）
* @return {}
*/
function addListener(el, ename, fn, task, wrap, scope){
el = Ext.getDom(el);
var id = getId(el),// 统一管理事件的id
es = Ext.elCache[id].events,//根据元素id找到对应事件监听集合
wfn;
wfn = E.on(el, ename, wrap);// 调用Ext.lib.Event.on添加原生的事件，实现浏览器的兼容
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.
// workaround for jQuery
if(el.addEventListener && ename == "mousewheel"){
var args = ["DOMMouseScroll", wrap, false];
el.addEventListener.apply(el, args);
Ext.EventManager.addListener(WINDOW, 'unload', function(){
el.removeEventListener.apply(el, args);
});
}
// fix stopped mousedowns on the document
if(el == DOC && ename == "mousedown"){
Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
}
}
以上代码讲解了addListener函数，主要是对原生事件的包装、注册、配置项的处理和事件列表（Ext.elCache[id].events，该列表的初始化定义在Ext.Element.addToCache(new Ext.Element(el), id)方法中，后续会分析）的维护，详细说明请参照代码中的注释。
接下来看删除事件
/**
* 移除事件处理器（event handler），跟简写方式{@link #un}是一样的。
* 通常你会更多的使用元素本身{@link Ext.Element#removeListener}的方法。
* Removes an event handler from an element. The shorthand version {@link #un} is equivalent. Typically
* you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version.
* @param {String/HTMLElement} el 欲移除事件的html元素或id。 The id or html element from which to remove the listener.
* @param {String} eventName 事件名称。The name of the event.
* @param {Function} fn 事件的执行那个函数。 The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
* @param {Object} scope 上下文 If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
* then this must refer to the same object.
*/
removeListener : function(el, eventName, fn, scope){
el = Ext.getDom(el);
var id = getId(el),//获取el的id，先从缓存中查找
f = el && (Ext.elCache[id].events)[eventName] || [],//值为一数组
wrap, i, l, k, len, fnc;
for (i = 0, len = f.length; i < len; i++) {
/* 0 = Original Function,
1 = Event Manager Wrapped Function,
2 = Scope,
3 = Adapter Wrapped Function,
4 = Buffered Task
*/
if (Ext.isArray(fnc = f[i]) && fnc[0] == fn && (!scope || fnc[2] == scope)) {
if(fnc[4]) {
fnc[4].cancel();
}
k = fn.tasks && fn.tasks.length;
if(k) {
while(k--) {
fn.tasks[k].cancel();
}
delete fn.tasks;
}
wrap = fnc[1];
E.un(el, eventName, E.extAdapter ? fnc[3] : wrap);
// jQuery workaround that should be removed from Ext Core
if(wrap && el.addEventListener && eventName == "mousewheel"){
el.removeEventListener("DOMMouseScroll", wrap, false);
}
// fix stopped mousedowns on the document
if(wrap && el == DOC && eventName == "mousedown"){
Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);
}
f.splice(i, 1);
if (f.length === 0) {
delete Ext.elCache[id].events[eventName];
}
for (k in Ext.elCache[id].events) {
return false;
}
Ext.elCache[id].events = {};
return false;
}
}
},
代码中方法 removeAll 的功能为移除某个元素所有的事件，而方法 getListeners 的功能为返回元素el对应的事件名eventName所有的监听函数，请看下面的例子
<input type="button" value="点击我" id="btn">
var buttonEl = Ext.get('btn');
buttonEl.on('click',function(e,t,o){alert(e.type + '1');},this);
buttonEl.on('click',function(e,t,o){alert(e.type + '2');},this);
buttonEl.on('click',function(e,t,o){alert(e.type + '3');},this); var
listeners = Ext.EventManager.getListeners(buttonEl,'click');
alert(listeners);
再看方法purgeElement : function(el, recurse, eventName)实现的功能是递归删除元素el以及el的子元素上已注册的事件
参数 el 要删除事件对应的元素
参数 recurse 是否删除el子元素上的事件，true为是
参数 eventName 已注册的事件名，如果没有传入eventName参数，默认则把删除所有的注册的事件
下面看该类中方法onDocumentReady，该方法的简写是Ext.onReady，该方法的功能是当Document准备好的时候触发传入的业务函数。源代码如下
onDocumentReady : function(fn, scope, options){
if (Ext.isReady) { // if it already fired or document.body is present
docReadyEvent || (docReadyEvent = new Ext.util.Event());//这样判断是否定义了变量
docReadyEvent.addListener(fn, scope, options);//文档已经载入，传入业务函数，并运行
docReadyEvent.fire();
docReadyEvent.listeners = [];
} else {//文档尚未载入，先初始化文档，然后传入业务函数
if (!docReadyEvent) {
initDocReady();
}
options = options || {};
options.delay = options.delay || 1;
docReadyEvent.addListener(fn, scope, options);
}
},
该方法中当DOM文档没有完全载入时，就通过initDocReady等待，并且把参数中的业务函数注册到docReadyEvent对象中，好让在initDocReady函数注册的fireDocReady函数执行。initDocReady的代码如下
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组件事件。