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;
    }
}