Javascript之事件

事件

事件的绑定（三种方法）
第一种方法(注意，此时的事件名不带on*)

对象.addEventListener("click",事件处理函数,false);
如：
	document.getElementById("btn").addEventListener("click",f1,false);

*第二种方法（此时的事件名带on）

对象.attachEvent("onclick",事件处理函数); 如：document.getElementById("btn").attachEvent("onclick",f1);
第三种方法

 对象.on事件名字=事件处理函数 如：
 document.getElementById("btn").onclick=function () {
 console.log("哈哈哈");
  };

*解绑事件（一一对应）
第一种解绑

 对象.removeEventListener("没有on的事件类型",函数名字,false); 如：
 document.getElementById("btn").removeEventListener("click",f1,false);

第二种解绑

对象.detachEvent("on事件类型",函数名字);  如：
 document.getElementById("btn").detachEvent("onclick",f1);

第三种解绑

对象.on事件名字=null; 如:
  document.getElementById("btn").onclick=null;

区别：
addEventListener 谷歌,火狐,IE11支持,IE8不支持,而 attachEvent 谷歌，火狐不支持,IE11不支持,IE8支持
怎么办？
兼容！！！
首先我们为绑定事件进行兼容，兼容思想：如果addEventListener支持，就用addEventListener，否则就用attachEvent，否则就用 对象.on事件名字=事件处理函数 ，此时结构就非常清晰了（才怪！），重头戏来了，一定要记住什么时候加on，什么时候不加on！！

  //绑定事件的兼容
  function addEventListener(element,type,fn) {
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }

解绑事件思路 与绑定事件思路大致相同

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