原生DOM event总结

下面是一个原生DOM event总结

// 如果是DOM事件，返回正确的事件名；否则返回布尔值 `false`
    var isDomEvent=function(obj,evtType){
        if(("on" + evtType).toLowerCase() in obj){//如果支持类似于onclick
            return evtType;
        }
        else if($S.transitionend && (evtType === 'transitionend' || evtType === $S.transitionend)){
            return $S.transitionend;
        }
        return false;
    };
    // 封装绑定和解除绑定DOM事件的方法以兼容低版本IE
    var bindDomEvent = function(obj, evtType, handler){//绑定
        var oldHandler;
        if(obj.addEventListener){//支持obj.addEventListener
            obj.addEventListener(evtType, handler, false);
        }
        else{
            evtType = evtType.toLowerCase();
            if(obj.attachEvent){//支持obj.attachEvent
                obj.attachEvent('on' + evtType, handler);
            }
            else{
                oldHandler = obj['on' + evtType];//支持obj.onclick模式
                obj['on' + evtType] = function(){//obj.onClick=function(){}
                    if(oldHandler){
                        oldHandler.apply(this, arguments);
                    }
                    return handler.apply(this, arguments);
                }
            }
        }
    };
    var unbindDomEvent = function(obj, evtType, handler){//解除绑定
        if(obj.removeEventListener){//支持obj.removeEventListener解除绑定
            obj.removeEventListener(evtType, handler, false);
        }
        else{
            evtType = evtType.toLowerCase();
            if(obj.detachEvent){//支持obj.detachEvent解除绑定
                obj.detachEvent('on' + evtType, handler);
            }
            else{
                // TODO: 对特定handler的去除
                obj['on' + evtType] = null;
            }
        }
    };

    var $E={
        on:function(obj, evtType, handler){
            var tmpEvtType;
            if($T.isArray(obj)){//如果是数组类型，就迭代
                for(var i=obj.length;i--;){
                    $E.on(obj[i], evtType, handler);
                }
                return;
            }
            //evtType is a string split by space
            if($T.isString(evtType)&&evtType.indexOf(" ")>0){//如果同时监听多个事件
                evtType = evtType.split(" ");
                for(var i=evtType.length;i--;){//分别监听多个事件
                    $E.on(obj, evtType[i], handler);
                }
                return;
            }
            //handler is an array
            if($T.isArray(handler)){//如果回调函数是数组，也迭代监听
                for(var i=handler.length;i--;){
                    $E.on(obj, evtType, handler[i]);
                }
                return;
            }
            //evtType is an object
            if($T.isObject(evtType)){//json格式
                for(var eName in evtType){
                    $E.on(obj, eName, evtType[eName]);
                }
                return;
            }
            //is dom event support
            if(tmpEvtType = isDomEvent(obj,evtType)){//如果是dom事件就监听
                evtType = tmpEvtType;
                bindDomEvent(obj, evtType, handler);
                return;
            }
            //dom event in origin element
            if(obj.elem && (tmpEvtType = isDomEvent(obj.elem,evtType))){
                evtType = tmpEvtType;
                bindDomEvent(obj.elem, evtType, handler);
                return;
            }
            //is specific custom event
            if(customEvent[evtType]){//自定义事件
                customEvent[evtType](obj,handler);
                return;
            }
            //other custom event
            if(!obj.events) obj.events={};
            if(!obj.events[evtType]) obj.events[evtType]=[];

            obj.events[evtType].push(handler);
            

        },
        once:function(obj,evtType,handler){
            var f = function(){
                handler.apply(win, arguments);//执行完一次后就解除绑定
                $E.off(obj ,evtType ,f);
            }
            $E.on(obj ,evtType ,f);
        },
        off:function(obj,evtType,handler){
            //evtType is a string split by space
            if($T.isString(evtType)&&evtType.indexOf(" ")>0){//取消监听多个事件，遍历
                evtType = evtType.split(" ");
                for(var i=evtType.length;i--;){
                    $E.off(obj, evtType[i], handler);
                }
                return;
            }
            //handler is an array
            if($T.isArray(handler)){//取消监听多个回调函数，遍历
                for(var i=handler.length;i--;){
                    $E.off(obj, evtType, handler[i]);
                }
                return;
            }
            //evtType is an object
            if($T.isObject(evtType)){//如果是json形式
                for(var eName in evtType){
                    $E.off(obj, eName, evtType[eName]);
                }
                return;
            }

            if(tmpEvtType = isDomEvent(obj,evtType)){
                evtType = tmpEvtType;
                unbindDomEvent(obj, evtType, handler);
                return;
            }    
            //dom event in origin element
            if(obj.elem && (tmpEvtType = isDomEvent(obj.elem,evtType))){
                evtType = tmpEvtType;
                unbindDomEvent(obj.elem, evtType, handler);
                return;
            }
            //is specific custom event
            if(customEvent[evtType]){
                customEvent._off(obj,evtType,handler);
                return;
            }    
            
            if(!evtType) {
                obj.events={}; 
                return;
            }
    
            if(obj.events){
                if(!handler) {
                    obj.events[evtType]=[];
                    return;
                }
                if(obj.events[evtType]){
                    var evtArr=obj.events[evtType];
                    for(var i=evtArr.length;i--;){
                        if(evtArr[i]==handler){
                            evtArr.splice(i,1);
                            return;
                        }
                    }
                }
            }
        },
        fire:function(obj,evtType){//通过自定义事件来触发
            var arg = [].slice.call(arguments,2),
                tmpEvtType;
            //obj is dom element
            if(tmpEvtType = isDomEvent(obj,evtType)){
                evtType = tmpEvtType;
                var evt = document.createEvent('HTMLEvents');
                evt.initEvent(evtType, true, true);
                obj.dispatchEvent(evt);
                return;
            }
            //dom event in origin element
            if(obj.elem && (tmpEvtType = isDomEvent(obj.elem,evtType))){
                evtType = tmpEvtType;
                var evt = document.createEvent('HTMLEvents');
                evt.initEvent(evtType, true, true);
                obj.elem.dispatchEvent(evt);
                return;
            }
            if(obj.events&&obj.events[evtType]){
                var handler=obj.events[evtType];
                for(var i=0,l=handler.length;i<l;i++){
                    // if(!arg[0]) arg[0] = {};
                    // arg[0].type = evtType;
                    // try{ 
                        handler[i].apply(window,arg); 
                    // } catch(e){ window.console && console.log && console.log(e.message); };
                    
                }
            }
        },