JavaScript 事件的绑定与解绑

事件的绑定：为同一个元素绑定多个相同的事件

三种方式：

1、对象.on事件名字 = 事件处理函数

（如果是多个相同事件注册这种方式，最后一个执行，之前的会被覆盖）

document.getElementById("example").onclick = function(){};

2、对象.addEventListener("没有on的事件名字"，事件处理函数，false);

document.getElementById("example").addEventListener("click",function(){},false);

3、对象.attachEvent("有on的事件名字"，事件处理函数);

document.getElementById("example").attachEvent("onclick",function(){});

为任意的一个元素，绑定任意一个事件（兼容代码）

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

事件的解绑：

注意：用什么方式绑定事件，就应该用什么方式解绑事件

1、

对象.on事件名字 = 事件处理函数 --->绑定事件

对象.on事件名字 = null;

document.lementByIdById("btn").onclick = function () {
    console.log("帅的一匹");
};
document.getElementById("btn2").onclick = function () {
    document.getElementById("btn").onclick = null;
}

2、

对象.addEventListener("没有on的事件类型",命名函数，false);----绑定事件

对象.removeEventListener("没有on的事件类型",命名函数,false);

function f1() {
    console.log("第一个事件");
}
function f2() {
    console.log("第二个事件");
}
document.getElemntById("btn").addEventListener("click",f1,false);
document.getElemntById("btn").addEventListener("click",f2,false);
//点击第二个按钮把第一个按钮绑定的第一个事件解绑
document.getElemntById("btn2").onclick = function () {
    //解绑的时候，需要在绑定事件的时候，使用命名函数
    document.getElemntById("btn").removeEventListener("click",f1, false);
}

3、

对象.attachEvent("on事件类型",命名函数);----绑定事件

对象.detachEvent("on事件类型",命名函数);

function f1() {
    console.log("第一个事件");
}
function f2() {
    console.log("第二个事件");
}
document.getElementById("btn").attachEvent("onclick",f1);
document.getElementById("btn").attachEvent("onclick",f2);
document.getElementById("btn2").onclick = function () {
    document.getElementById("btn").detachEvent("onclick",f1);
}

解绑事件的兼容代码

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