绑定事件和解绑事件

绑定事件：

1.对象.on+事件类型=事件处理函数
对象[on+事件类型]=事件处理函数

2.对象.addEventListener(事件类型 , 事件处理函数 , false)
//火狐 谷歌 IE11支持 IE8 不支持

3.对象.attachEvent(on + 事件类型，事件处理函数)
//火狐 谷歌 IE11不支持 IE8支持

addEventListener(); 和 attachEvent() 区别：
1.方法名不一样
2.参数个数不一样addEventListener三个参数,attachEvent两个参数
3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
4.this不同,addEventListener 中的this是当前绑定事件的对象
attachEvent中的this是window
5.addEventListener中事件的类型(事件的名字)没有on
attachEvent中的事件的类型(事件的名字)有on

兼容代码：

function addEventListener(ele,type,fn){
    if(ele.addEventListener){
      ele.addEventListener(type,fn,false);
    }else if(ele.attachEvent){
      ele.attachEvent("on"+type,fn);
    }else{
      ele["on"+type]=fn;
    }
  }

解绑事件：

注意:用什么方式绑定事件,就应该用对应的方式解绑事件
1.解绑事件
对象.on事件名字=事件处理函数—>绑定事件
对象.on事件名字=null;

2.解绑事件
对象.addEventListener(“没有on的事件类型”,命名函数,false);—绑定事件
对象.removeEventListener(“没有on的事件类型”,函数名字,false);
//必须是命名函数
//火狐 谷歌 IE11支持 IE8 不支持
3.解绑事件
对象.attachEvent(“on事件类型”,命名函数);—绑定事件
对象.detachEvent(“on事件类型”,函数名字);
//必须是命名函数
//火狐 谷歌 IE11不支持 IE8支持

兼容代码：

function removeEventListener(ele,type,fn){
    if(ele.removeEventListener){
      ele.removeEventListener(type,fn,false);
    }else if(ele.detachEvent){
      ele.detachEvent("on"+type,fn);
    }else{
      ele["on"+type]=null;
    }
  }