js學(xué)習(xí)總結(jié)之DOM2兼容處理順序問題的解決方法

/*
 bind:處理DOM2級事件綁定的兼容性問題（綁定方法）
 @parameter:
  curEle->要綁定事件的元素
  evenType->要綁定的事件類型（"click","mouseover"）
  evenFn->要綁定的方法
*/
function bind(curEle,evenType,evenFn){
 if('addEventListener' in document){
  curEle.addEventListener(evenType,evenFn,false);
  return;
 }
 //給evenFn化妝 并且把化妝前的照片貼在自己對應(yīng)的腦門上
 var tempFn = function(){
  evenFn.call(curEle)
 }
 tempFn.photo = evenFn;
 //首先判斷自定義屬性之前是否存在，不存在的話創(chuàng)建一個，由于要存儲多個化妝后的結(jié)果，所以我們讓其值是一個數(shù)組
 if(!curEle["mybind"+evenType]){//根據(jù)不同的事件類型是不同的數(shù)組
  curEle["mybind"+evenType] = [];
 }
 //解決重復(fù)問題:每一次自己在往自定義屬性對應(yīng)的容器中添加前，看一下是否已經(jīng)存在，存在的話就不用重新的添加了，同理也不需要往事件池里面存儲了
 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的問題，但是又拋出了一個新的問題，不知道該如何刪除了（我們不知道匿名函數(shù)是誰）
  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"]這里找化妝后的結(jié)果，找到之后再事件池中把化妝后的結(jié)果移除事件池
 var ary = curEle['myBind'+evenType];
 for(var i = 0;i<ary.length;i++){
  if(ary[i].photo===evenFn){
   ary.splice(i,1)//找到后 把自己存儲的容器中對應(yīng)的移除掉
   curEle.detachEvent("on"+evenType,ary[i]);//在把事件池中對應(yīng)的也移除掉
   break;
  }
 }
 
}
//創(chuàng)建事件池，并且把需要給當(dāng)前元素綁定的方法依次的增加到事件池中
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);
 //執(zhí)行on的時候，我們給當(dāng)前元素綁定了一個點擊的行為，當(dāng)點擊的時候執(zhí)行run方法:run方法中的this是當(dāng)前元素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;

  }
 }
}
//我們只給當(dāng)前元素的點擊行為綁定一個方法run，當(dāng)觸發(fā)點擊的時候執(zhí)行的是run方法，我在run方法中根據(jù)自己存儲的方法順序分別的在把這些方法執(zhí)行

function run(e){
 // this 當(dāng)前點擊的對象curEle
 e = e || window.event;
 var flag = e.target?true:false;
 if(!flag){
  e.target = e.srcElement;

 }
 //獲取自己事件池中綁定的那些方法，并且讓這些方法依次的執(zhí)行就可以了
 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);
 }
}