事件绑定在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