IE9以下的this指向问题

    在JavaScript中，可以通过DOM事件属性来实现给元素事件添加句柄，不过这在针对某个事件类型调用相应的事件句柄的时候，不能给事件句柄提供参数，也就是说，事件属性的值只能是一个函数引用。例如：不能采用这种调用方式：element.onclick = test();element.onclick = test(arg1,arg2);只能通过element.onclick = function(){ ... };或者element.onclick = test这种方式来实现，所以无法给函数传递参数。

    在此事件监听就派上用场了，但是由于两派浏览器的差异，其绑定的方法也不一样，其中，遵循标准的浏览器使用W3C定义的addEventListener函数绑，函数定义如下：

    function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])

    eventFlag : 事件名称，如click、mouseover…
    eventFunc: 绑定到事件中执行的动作
    useCapture: 指定是否绑定在捕获阶段，true为是，false为否，默认为true
    在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流

    IE中使用自有的attachEvent函数绑定时间，函数定义如下：

   function attachEvent(string eventFlag, function eventFunc)
   eventFlag: 事件名称，但要加上on，如onclick、onmouseover…
   eventFunc: 绑定到事件中执行的动作
  在事件监听流中可以使用window.event.cacenlBubble=false来阻止事件继续往下流

   这也不算是很麻烦，麻烦的是IE9以下版本的浏览器有this指向问题，为了具体说明这个问题，请查看如下代码及注释或许就会明白了：

   <div id="test">点我，运行绑定的点击事件！</div>
   <div id="test2">点我解绑！！</div>
   <script type="text/javascript">
    var btn1=document.getElementById("test2");
    var btn2=document.getElementById("test");
     function handler(event){
alert("this:"+this.id);
alert("this==window："+String(this==window));
      }
    //绑定/解绑事件
    var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else 
{
element["_"+type]=handler;//让handler成为element的方法，这样直接用element["_"+type]就会指向element

                       // element.attachEvent("on"+type,element["_"+type]);/*但是如果把element["_"+type]放在这里引用，就又会指向window，这样的执行结果是 this:undefined this==window:true*/

element[type] = function(){element["_"+type]()};/*也就是说只要不是在window里面执行element["_"+type]，他就会默认指向

window，那么我们就把他在包一层，这样的话引用element[type]指向window，正好element["_"+type]()在window里面执行，指向element*/
element.attachEvent("on"+type,element[type]);//这样的执行结果是 this:test this==window:false
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else
{

                       // element.detachEvent("on"+type,element["_"+type]);
element.detachEvent("on"+type,element[type]);
}
}
   }
    //绑定事件
   EventUtil.addHandler(btn2,"click",handler);
   //解绑事件
   btn1.οnclick=function(){EventUtil.removeHandler(btn2,"click",handler);}
</script>

    当然你也可以不加注释//，因为一个事件可以绑定多个句柄，执行顺序：

  

     在IE中我们可以使用attachEvent方法

?

1 2 3 4

//object.attachEvent(event,function); btn1Obj.attachEvent( "onclick" ,method1); btn1Obj.attachEvent( "onclick" ,method2); btn1Obj.attachEvent( "onclick" ,method3);

    使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是

method3->method2->method1

     可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

?

1 2 3 4

//element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener( "click" ,method1, false ); btn1Obj.addEventListener( "click" ,method2, false ); btn1Obj.addEventListener( "click" ,method3, false );

执行顺序为method1->method2->method3