今天要说的是javascript里面的事件绑定。何为事件绑定，为什么要用事件绑定，如何解除事件绑定，事件绑定有哪些使用条件以及兼容性，下面我们就以上几方面做分部的介绍：

何为事件绑定

所谓的事件绑定就是给对象用事件绑定多个函数，以达到对一对象绑定某个事件运行多个函数的目的。

  • IE方式: 对象.attachEvent(事件名 , 函数)； // 两个参数，当中事件名包括onclick ,onmouseover等
  • DOM方式: 对象.addEventListener(事件名, 函数 , 是否捕获 ) // 三个参数，当中事件名包括click ,mouseover等，注意这里没有on 。 而且“是否捕获” 大多数为false

为什么要用事件绑定

上面介绍了事件绑定的概念以及它的函数运用。那现在就要说说为什么要用事件绑定，正如它的概念所说的，它是绑定一个事件，运行多个函数。怎么理解呢？打一个最简单的比方，点击一个按钮，要运行函数a， 之后接着又要运行函数b。有如下代码：

<script>
function a(){alert("a")};
function b(){alert("b")};   
window.onload=function(){
    var oBtn=document.getElementById("btn1");
    oBtn.onclick=a;
    oBtn.onclick=b;
}
</script>

<input type="button" value="点击" id="btn"/>

运行结果：因为函数覆盖的原因，所以只会弹出 b， 显然没有达到我们想要的结果。

下面我们使用事件绑定，将JS代码修改如下：

<script>
function a(){alert("a")};
function b(){alert("b")};
var oBtn=document.getElementById("btn1");
window.onload=function(){
    if(oBtn.attachEvent){
        oBtn.attachEvent("onclick",  a);
        oBtn.attachEvent("onclick", b);
    } else {
        oBtn.addEventListener("click", a, false);
        oBtn.addEventListener("click", b,false);
    }
}
</script>

<input type="button" value="点击" id="btn"/>

结果：在ie 中先弹出b，再弹出a 。而在ff中先弹出a ，再弹出b；虽然在两个浏览器弹出的顺序不一样，但是基本上达到了所要的效果。

事件绑定对于多个人操作同一代码没有局限性，而且互不影响，所以比较适合一个团队开发同一项目。

事件绑定的解除

既然有绑定事件，所以也就有解除绑定，下面列出解除事件绑定的函数：

  • IE方式: 对象.detachEvent(事件名 , 函数); // 两个参数，当中事件名包括onclick ,onmouseover等
  • DOM方式: 对象.removeEventListener(事件名, 函数 , 是否捕获 ) ; // 三个参数，当中事件名包括click ,mouseover等，注意这里没有on。 而且“是否捕获” 大多数为false

事件绑定的使用条件以及兼容性

由于绑定事件对于各个浏览器的兼容性并不是很友好，而我们又需要经常用到它，因此把它封装好兼容函数是十分有必要的，下面是封装好的绑定事件函数：

function addEvent(obj, sEvent, fn){
    if(obj.attachEvent){
        obj.attachEvent(‘on’+sEvent, fn);
    } else {
        obj.addEventListener(sEvent, fn, false);
    }
}

同样封装好的解除绑定函数：

function removeEvent(obj, sEvent, fn){
    if(obj.detachEvent){
        obj.detachEvent(‘on’+sEvent, fn);
    } else {
        obj.removeEventListener(sEvent, fn, false);
    }
}

虽然绑定事件函数用起来很方便，但是也有一些局限性，在这里主要提出两点：

第一：this 。即在绑定函数里，使用的this并不是代表对象本身。

第二：匿名函数。即绑定事件里面的函数没有命名（如下代码），而解除绑定事件的函数也没有命名，虽然这两个匿名函数的功能是一样的（这里都是弹出a），但却无法对obj解除这个匿名函数。

addEvent(obj, sEvent, function(){alert("a")})；

removeEvent(obj, sEvent, function(){alert("a")});