JS DOM2事件绑定中this指向问题的兼容处理方案

作者:像素猫时间:2026-10-22 06:27:17浏览:409

本文针对DOM2级事件绑定在不同浏览器中的兼容性问题,重点解析this指向错误的解决方法。通过封装bind函数,利用addEventListener处理标准浏览器,对IE低版本采用attachEvent,并通过临时函数包装及自定义属性存储,确保事件回调中this正确指向目标元素。

DOM2事件绑定中this指向的兼容处理

针对前文提及的DOM2级事件绑定所存在的兼容性问题,本节首先阐述关于this指向的处理方式。


/*
 bind:处理DOM2级事件绑定的兼容性问题(绑定方法)
 @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] = [];
 }
 curEle["mybind"+evenType].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){
   curEle.detachEvent("on"+evenType,ary[i]);
   break;
  }
 }
 
}

以上内容即为本文的全部要点,期望对读者的学习有所助益,同时也欢迎持续关注本站以获取更多技术支持。

作者最新文章