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组件事件。