事件绑定在IE下this是window的问题

昨天写一个函数的时候,后来用了事件绑定,开始没在IE下测试,在chrome下都是没问题的。后来在IE下测试发现出错。

后来修改一下,发现oBox.onclick=function(){}没问题,而addEven(oBox, "click", function(){})在IE下就出错。

再后来发现居然在IE下的this居然是window。。。

在群里问了一下兼容性解决办法,再搜索一下,找到下面的一个博文

封装一个事件绑定函数

function addEven(obj,type,fn)
{
   if(obj.attachEvent)
 {
   obj.attachEvent('on'+type,fn); 
  }
 else
 {
   obj.addEventListener(type,fn,false); 
 }
}

在ie下弹出this的时候不会弹出标签对象本身,而是弹出window,先来看看call()方法:函数的调用如a();实际上等同于a.call();

例如有这样一个函数function a(){alert(this)}  这时结果是window,如果这样调用a.call('aaa');会弹出aaa,也就是说call里面的变量会改变函数this的值。

因此封装绑定函数就可以调用call,这样来做

function addEven(obj,type,fn)
{
   if(obj.attachEvent)
 {
   obj.attachEvent('on'+type,function(){
      fn.call(obj)//里面的this的值变成obj 变成当前调用的标签对象
    }); 
    }
 else
 {
   obj.addEventListener(type,fn,false); 
 }
}

再进一步用三目运算优化就可以这样做

function addEven(obj,type,fn)
{
  return obj.attachEvent ? obj.attachEvent('on'+type,function(){fn.call(obj)}) : obj.addEventListener(type,fn,false); 
}

转自:http://www.cnblogs.com/thinksley/archive/2012/11/28/2792258.html

posted @ 2012-12-05 09:33  kendyjack  阅读(934)  评论(0编辑  收藏  举报