原生DOM event總結(jié)

下面是一個原生DOM event總結(jié)

// 如果是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)){//如果是數(shù)組類型,就迭代
                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){//如果同時監(jiān)聽多個事件
                evtType = evtType.split(" ");
                for(var i=evtType.length;i--;){//分別監(jiān)聽多個事件
                    $E.on(obj, evtType[i], handler);
                }
                return;
            }
            //handler is an array
            if($T.isArray(handler)){//如果回調(diào)函數(shù)是數(shù)組,也迭代監(jiān)聽
                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事件就監(jiān)聽
                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);//執(zhí)行完一次后就解除綁定
                $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){//取消監(jiān)聽多個事件,遍歷
                evtType = evtType.split(" ");
                for(var i=evtType.length;i--;){
                    $E.off(obj, evtType[i], handler);
                }
                return;
            }
            //handler is an array
            if($T.isArray(handler)){//取消監(jiān)聽多個回調(diào)函數(shù),遍歷
                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){//通過自定義事件來觸發(fā)
            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); };
                    
                }
            }
        },
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容