js學習總結----DOM2相容處理重複問題

標籤：重複   個數   []   dom2   dev   根據   style   for   over   

在解決this問題之後，只需要在每次往自訂屬性和事件池當中添加事件的時候進行一下判斷就好了，具體代碼如下

/*    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;        }    }    }

 

js學習總結----DOM2相容處理重複問題