js事件绑定那些事

前端开发制作网页时，通常利用js进行各种网页交互，而交互必须涉及到事件绑定，下面来介绍一下事件绑定的各种方法

1.首先我们要了解一下事件三要素：即 事件源（要触发的对象），事件（怎么触发此事件），事件处理函数（发生了什么）
2.事件绑定的几种方法（以onclick事件为例）：

object.onclick=function(){
  //do something
  }

这种方法在一个元素中只能绑定一次事件，如果给一个元素绑定多个事件，后面的会覆盖前面的

elem.addEventListener('click',function(){
      //do something
  },false).

addEventListener是w3c标准写法，共有三个参数，第一个为事件类型，但是不加on，第二个参数是一个函数，用于写逻辑代码进行事件操作，第三个参数为boolean型值，true或false,true表示事件捕获，false表示事件冒泡，默认为false
清除事件绑定时用removeEventListener();注意：清除事件和绑定事件一定要为同一个

elem.attachEvent('onclick',function(){
//do something
})

早期IE事件绑定方法，只有两个参数，因为早期IE不支持事件冒泡，第一个参数为事件类型 **需加on**，第二个参数为事件处理函数,清除事件时用detachEvent（）

**需要注意的是：attachEvent函数中 this指向window，可以用call，apply,bind 进行修改this指向 且它的事件相对于addEventListener 执行顺序是相反的**

简单函数用于解决兼容性问题：

function addEvent(obj,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,function(){
handle.call(obj);
});
}catch(e){ // 早期浏览器
obj['on' + type] = handle;
}
}
}