js中DOM2兼容處理this的示例分析

這篇文章主要介紹js中DOM2兼容處理this的示例分析，文中介紹的非常詳細，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

DOM2級存在的兼容問(wèn)題，這里先說(shuō)一下this的問(wèn)題。

/*
 bind:處理DOM2級事件綁定的兼容性問(wèn)題（綁定方法）
 @parameter:
  curEle->要綁定事件的元素
  evenType->要綁定的事件類(lèi)型（"click","mouseover"）
  evenFn->要綁定的方法
*/
function bind(curEle,evenType,evenFn){
 if('addEventListener' in document){
  curEle.addEventListener(evenType,evenFn,false);
  return;
 }
 //給evenFn化妝 并且把化妝前的照片貼在自己對應的腦門(mén)上
 var tempFn = function(){
  evenFn.call(curEle)
 }
 tempFn.photo = evenFn;
 //首先判斷自定義屬性之前是否存在，不存在的話(huà)創(chuàng  )建一個(gè)，由于要存儲多個(gè)化妝后的結果，所以我們讓其值是一個(gè)數組
 if(!curEle["mybind"+evenType]){//根據不同的事件類(lèi)型是不同的數組
  curEle["mybind"+evenType] = [];
 }
 curEle["mybind"+evenType].push(tempFn);
 curEle.attachEvent("on"+evenType,tempFn);
 //這里的開(kāi)始想法是改變this的指向，把this不指向window
 /*
  box.attachEvent("onclick",function(){
   fn1.call(box)
  })
  這樣雖然解決了this的問(wèn)題，但是又拋出了一個(gè)新的問(wèn)題，不知道該如何刪除了（我們不知道匿名函數是誰(shuí)）
  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){
   curEle.detachEvent("on"+evenType,ary[i]);
   break;
  }
 }
 
}