js學習總結----DOM2相容處理順序問題

標籤：相容性   根據   自訂屬性   class   parameter   dom   自己   添加   標準   

解決順序問題:我們不用瀏覽器內建的事件池了，而是自己類比標準瀏覽器的事件池實現，具體代碼如下:

/*    bind:處理DOM2級事件綁定的相容性問題（Binder 方法）    @parameter:        curEle->要綁定事件的元素        evenType->要綁定的事件類型（"click","mouseover"）        evenFn->要綁定的方法*/function bind(curEle,evenType,evenFn){    if(‘addEventListener‘ in document){        curEle.addEventListener(evenType,evenFn,false);        return;    }    //給evenFn化妝 並且把化妝前的照片貼在自己對應的腦門上    var tempFn = function(){        evenFn.call(curEle)    }    tempFn.photo = evenFn;    //首先判斷自訂屬性之前是否存在，不存在的話建立一個，由於要儲存多個化妝後的結果，所以我們讓其值是一個數組    if(!curEle["mybind"+evenType]){//根據不同的事件類型是不同的數組        curEle["mybind"+evenType] = [];    }    //解決重複問題:每一次自己在往自訂屬性對應的容器中添加前，看一下是否已經存在，存在的話就不用重新的添加了，同理也不需要往事件池裡面儲存了    var ary = curEle["mybind"+evenType];    for(var i = 0;i<ary.length;i++){        var cur = ary[i];        if(cur.photo === evenFn){            return;        }    }    ary.push(tempFn);    curEle.attachEvent("on"+evenType,tempFn);    //這裡的開始想法是改變this的指向，把this不指向window    /*        box.attachEvent("onclick",function(){            fn1.call(box)        })        這樣雖然解決了this的問題，但是又拋出了一個新的問題，不知道該如何刪除了（我們不知道匿名函數是誰）        var tempFn = function(){            fn1.call(box)        }        box.attachEvent("onclick",tempFn);        box.detachEvent("onclick",tempFn);    */}function unbind(curEle,evenType,evenFn){    if(‘removeEventListener‘ in document){        curEle.removeEventListener(evenType,evenFn,false);        return;    }    //拿evenFn到curEle["myBind"]這裡找化妝後的結果，找到之後再事件池中把化妝後的結果移除事件池    var ary = curEle[‘myBind‘+evenType];    for(var i = 0;i<ary.length;i++){        if(ary[i].photo===evenFn){            ary.splice(i,1)//找到後 把自己儲存的容器中對應的移除掉            curEle.detachEvent("on"+evenType,ary[i]);//在把事件池中對應的也移除掉            break;        }    }    }//建立事件池，並且把需要給當前元素繫結的方法依次的增加到事件池中function on(curEle,evenType,evenFn){    if(!curEle["myEvent"+evenType]){        curEle["myEvent"+evenType] = [];    }    var ary = curEle["myEvent"+evenType];    for(var i = 0;i<ary.length;i++){        var cur = ary[i];        if(cur===evenFn){            return;        }    }    ary.push(evenFn);    //執行on的時候，我們給當前元素繫結了一個點擊的行為，當點擊的時候執行run方法:run方法中的this是當前元素curEle,並且瀏覽器給run傳遞一個MouseEvent事件對象    // curEle.addEventListener(evenType,run,false);    bind(curEle,evenType,run)}//在自己的事件池中把某一個方法移除function off(curEle,evenType,evenFn){    var ary = curEle["myEvent"+evenType];    for(var i = 0;i<ary.length;i++){        var cur = ary[i];        if(cur===evenFn){            ary.splice(i,1);            break;        }    }}//我們只給當前元素的點擊行為綁定一個方法run，當觸發點擊的時候執行的是run方法，我在run方法中根據自己儲存的方法順序分別的在把這些方法執行function run(e){    // this 當前點擊的對象curEle    e = e || window.event;    var flag = e.target?true:false;    if(!flag){        e.target = e.srcElement;    }    //擷取自己事件池中綁定的那些方法，並且讓這些方法依次的執行就可以了    var ary = this["myEvent"+e.type];//e.target也代表curEle    for(var i = 0;i<ary.length;i++){        var tempFn = ary[i];        tempFn.call(this,e);    }}

js學習總結----DOM2相容處理順序問題