模擬一個自己的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,然後顯示按瞭哪個鍵或者點擊瞭鼠標哪個鍵。

發佈留言