事件绑定的两种形式

      在面试中，有的时候我们想竭力的表达自己的想法，往往没有听清题目 就开始回答，所以给出的答案往往都是答非所问。面试时一定要听清面试官的题目，这样才可以在面试中做到游刃有余。而回答题目一般有两层意思：普通答案，期望答案。期望答案就是加分项，这 才是面试官真正提问这个问题的本意。比如：一般的 IE 事件绑定不 w3c 事件绑定有什么区 别？能说得上 attachEvent,addEventLisenter 的是普通答案，然后在继续 attachEvent 里 边的 this 指向会有问题，addEventLisenter 还有第三个参数，还有冒泡绑定等等用法之类 的。 所以由此得出的结论是丌管自己的水平能力是多少，一定要听清题目，尽自己最大的努 力言简意赅的回答问题，而是要抓住要点。

为了回答上面的问题，我们必须了解事件绑定的两种形式。事件绑定有两种形式：

　　一、给一个对象绑定一个事件处理函数的第一种形式如下：　　　　

obj.onclick = fn1;
function fn1(){
      alert(1);
      alert(this);
}
function fn2(){
    alert(2);
    alert(this);
}

　　这种方式有个缺点：多个事件处理函数时会相互覆盖，比如：

document.onclick = fn1;
document.onclick = fn2;  //会覆盖前面绑定的fn1

二、给一个对象绑定一个事件处理函数的第二种形式如下：

　   在IE下用attachEvent,标准浏览器下用addEventListener。两者之间的区别如下:

① ie: obj.attachEvent(事件名称，事件函数)

1.没有捕获
2.事件名称有on
3.多个事件函数执行的顺序：标准ie下正序 非标准ie下倒序
4.this指向window

 

示例如下：

document.attachEvent('onclick',fn1);

document.attachEvent('onclick',fn2);

此时，attachEvent的this指向window,可利用call来修正attachEvent的this指向问题，由window对象变为document对象，具体代码如下:
document.attachEvent('onclick',function(){
    fn1.call(document);
})

document.attachEvent('onclick',function(){
    fn2.call(document);
})

② 标准:obj.addEventListener(事件名称，事件函数，是否捕获);

1.有捕获
2.事件名称没有on
3.多个事件执行的顺序是正序
4.this指向触发该事件的对象（在下面的例子中指的是document）

 

示例如下：

document.addEventListener("click",fn1,false);
document.addEventListener("click",fn2,false);

 addEventListener的第三个参数表示是否捕获：默认是false。false代表冒泡， true代表捕获

通过如下代码，还可以发现这种方式的特点是：可以给一个对象的同一个事件绑定多个不同的函数，多个事件处理函数时不会相互覆盖。

 

最后，为了兼容不同的浏览器，封装bind绑定函数，同时解决attachEvent的this指向问题，具体代码如下：

function bind(obj,evname,fn){

   if(obj.addEventListener){

         obj.addEventListener(evname,fn,false);

    }else{
          obj.attachEvent('on' + evname,function(){
                fn.call(obj);
          });
    }
}

bind(document,'click',fn1);
bind(document,'click',fn2);