js學習總結之DOM2相容處理順序問題的解決方案，jsdom2

js學習總結之DOM2相容處理順序問題的解決方案，jsdom2

DOM2相容處理順序問題的解決方案，具體如下

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

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。