ie attachEvent this代表window

解决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。

这个方法一直工作的很好，直到一个新问题的出现。先看一段代码：

<form id="editForm" method="post" name="editForm"> <input name="field1" value="crashed" /> <input name="field2" value="works" /> </form> <script> var form = document.getElementById('editForm'); for(i=0;i<form .elements.length;i++){ var obj=form .elements[i]; obj._focus=function(){ this.style.border='1px solid #1D95C7'; } obj._blur=function(){ this.style.border='1px solid #cccccc'; } obj.attachEvent('onfocus',function(){obj._focus();}); obj.attachEvent('onblur',function(){obj._blur();}); } </script>

提示：你可以先修改部分代码再运行。

上面的代码为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的更改。