js事件的綁定的三種方法

/* 事件的綁定：三種方式
* 1.對象.on事件名字=事件處理函數  （如果是多個相同事件注冊用這種方式，只執行最后一個）
*   my$("btn").onclick=function(){};
* 2.對象.addEventListener("沒有on的事件名字"，事件處理函數，false)
*        （如果是多個相同事件注冊用這種方式，都會執行） 谷歌，火狐，IE11支持，IE8不支持
* 　　　　　　　　this是當前綁定事件的對象

* 3.對象.attachEvent("有on的事件名字"，事件處理函數)  IE8支持，但谷歌火狐IE11不支持  this是window

* */

/*用什么方式綁定事件，就應該用對應的方式解綁事件
* 1.對象.on事件名字=事件處理函數---->對象.on事件名字=null；
* 2.對象.addEventListener("沒有on的事件類型"，命名函數，false)--->對象.removeEventListener("沒有on的事件類型"，命名函數，false)
* 3.對象.attachEvent("有on的事件類型"，命名函數)--->對象.detachEvent(有on的事件類型"，命名函數)
*
* */

//為同一元素綁定多個事件：addEventListener("參數1",參數2,參數3)  IE8不支持
//參數1：事件的類型---事件的名字，沒有on
//參數2：事件處理函數---函數（命名函數，匿名函數）
//參數3：布爾類型，默認是false（冒泡階段執行）true(捕獲階段產生)

//綁定事件的兼容代碼
function myaddEventListener(element,type,myfunction) { //傳進來的參數type是不帶on的
    //判斷瀏覽器是否支持這個方法
    if(element.addEventListener){
        element.addEventListener(type,myfunction,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,myfunction);
    }
    else {
        element["on"+type]=myfunction;
    }
}

//解綁事件的兼容代碼
function myremoveEventListener(element,type,functionName) {
    if(element.removeEventListener){
        element.removeEventListener(type,functionName,false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type,functionName);
    }
    else {
        element["on"+type]=null;
    }
}