類比一個自己的jquery（三） 綁定以及移除事件

類比bind方法與unbind方法 jquery的bind() 方法為被選元素添加一個或多個事件處理常式，並規定事件發生時啟動並執行函數。 類比的bind事件主要是針對ie與w3c事件模型的不一致提供一個統一的介面。然後再設定綁定事件的上下文為觸發事件的元素，也就是在事件中能夠通過this訪問到觸發事件的元素。 event.js代碼 複製代碼    /*!Event 事件處理 類比jquery的bind與unbind     *     *Date   2014-4-10     *author meng    */(function(_window){    _window.MQuery.fn.bind=function(evt,fun,useCapture){        //定義handle統一處理回調事件 handle封裝事件預設的e參數，針對IE與標準的不同實現提供一個統一介面。        var handle=function(e){            var evt=e||_window.event;            //檢查是否是w3c模式            var isW3c=evt.toString&&evt.toString().indexOf("MouseEvent")!=-1;            //封裝e 相容w3c模式與ie模式            var evtArg={};            for(var p in evt){                evtArg[p]=evt[p];            }            evtArg.target=evt.target||evt.srcElement;            //阻止事件預設行為            evtArg.preventDefault=function(){                if(evt.preventDefault){                    evt.preventDefault();                }                else{                    evt.returnValue =false;                }            }            //停止事件冒泡            evtArg.stopPropagation=function(){                if(evt.stopPropagation){                    evt.stopPropagation();                }                else{                    evt.cancelBubble=true;                }            }            //判斷滑鼠點擊事件點擊了（左、中、右）哪個鍵            //w3c與ie都使用button代表點擊的哪個鍵            //w3c:0左鍵 1中鍵 2右鍵            //IE：0沒有按鍵 1左鍵 2中鍵 3同步選取左右鍵 4中鍵 5同步選取左中鍵 6同步選取右中鍵 7同步選取左中右鍵            var buttons={                "left":false,                "middle":false,                "right":false            }            if(isW3c){                //W3c                switch(event.button){                    case 0:buttons.left=true;break;                    case 1:buttons.middle=true;break;                    case 2:buttons.right=true;break;                    default:break;                }            }            else if(event.button){                //Ie                switch(event.button){                    case 1:buttons.left=true;break;                    case 2:buttons.right=true;break;                    case 3:buttons.left=true;buttons.right=true;break;                    case 4:buttons.middle=true;break;                    case 5:buttons.left=true;buttons.middle=true;break;                    case 6:buttons.middle=true;buttons.right=true;break;                    case 7:buttons.left=true;buttons.middle=true;buttons.right=true;break;                    default:break;                }            }            evtArg.buttons=buttons;             //判斷鍵盤點擊事件，w3c與ie均提供了keycode擷取按鍵的代碼 通過string.fromCharCode方法擷取具體的鍵盤字母值            //同時檢查是否按了ctrl、shift、alt。            //把按索引值存入keycodenames屬性            evtArg.keyCodeNames=evt.keyCode?[String.fromCharCode(evt.keyCode)]:[];            if(evt.altKey){                evtArg.keyCodeNames.push('ALT');            }            if(evt.shiftKey){                evtArg.keyCodeNames.push('SHIFT');            }            if(evt.ctrlKey){                evtArg.keyCodeNames.push('CTRL');            }            //擷取預設的參數e            evtArg.get=function(){                return evt;            }            //擷取事件觸發元素            //通過fun的call調用設定觸發元素為事件的上下文            fun.call(evtArg.target,evtArg);        }        //把原函數設定為handle的一個屬性，這樣移除事件的時候通過原函數找到handle，才能移除        handle.sour=fun;        useCapture=useCapture||false;        //綁定事件        this.each(function(x){            if(!x.events){                x.events=[];            }            x.events.push(handle);            if(x.addEventListener){                x.addEventListener(evt,handle,useCapture);                console.log('w3c');            }            else if(x.attachEvent) {                x.attachEvent('on'+evt,handle);                console.log('ie');            }        })    }    _window.$.fn.unbind=function(evt,fun,useCapture){        useCapture=useCapture||false;        this.each(function(x){            //x.events不為undefined才移除事件            if(x.events){                for(var i=0;i<x.events.length;i++){                    var handle=x.events[i];                    if(handle.sour==fun){                        if(x.removeEventListener){                            x.removeEventListener(evt,handle,useCapture);                        }                        else if(x.detachEvent) {                            x.detachEvent('on'+evt,handle);                        }                    }                }            }            else{                console.log("沒有綁定任何事件");            }        })    }})(window);複製代碼測試代碼 比如綁定鍵盤點擊事件以及鍵盤點擊事件 複製代碼function showMsg(e){　　　　　　　　　 console.log(this.innerHTML);                console.log(e.keyCodeNames);                console.log(e.buttons);            }            function bind(){                $(document).bind("keydown",showMsg);                $(document).bind("mousedown",showMsg);            }            function unbind(){                $(document).unbind("keydown",showMsg)                $(document).unbind("mousedown",showMsg);            }複製代碼如果點擊了某個元素或者按了鍵盤某個鍵則會顯示該元素的innerHTML，然後顯示按了哪個鍵或者點擊了滑鼠哪個鍵。