解决IE中attachEvent函数的this指针问题
绑定事件,IE使用attachEvent,FF使用addEventListener,除了函数名、参数的不同,还有个关于this指针的差异。
在FF中,绑定的事件处理函数被调用时,this指向事件绑定的object,而IE中,this指向window对象。简单的做法,是将事件处理函数定义为对象属性,然后通过匿名函数进行事件绑定。
例如:
obj._click =
function
(
)
{
alert
(
this
.tagName
)
;
}
obj.attachEvent
(
'onclick'
,
function
(
)
{
obj._click(
)
;
}
)
;
由于使用了匿名函数,直接调用obj._click(),而不是将obj._click作为handler绑定到onclick事件,_click中,this指针将指向调用者obj,而不是window。
这个方法一直工作的很好,直到一个新问题的出现。先看一段代码:
提示:你可以先修改部分代码再运行。
上面的代码为input做一个简单的增强,focus时,改变边框颜色,blur时复原。看起来很简单,运行起来,结果却不对。
由于for循环的缘故,obj变量被不断地改变,于是,对于第一个input框的增强没能成功实现。
解决方法,其实也很简单,再构造一个匿名函数,利用参数改变对obj的直接引用就ok了。
obj.attachEvent
(
'onfocus'
,
(
function
(
o)
{
return
function
(
)
{
o._focus(
)
;
}
;
}
)
(
obj)
)
;
看起来稍微有些费力,其实也简单,(…)(obj)使用obj作为参数,调用了一个匿名的函数,匿名函数啥都不干,返回了一个调用了 o._focus()的函数。费了这么大劲,无非是先把obj赋值给o,然后构造一个引用o的匿名函数,用于执行_focus方法。这样就绕开了for循 环对obj的更改。