JS事件监听

事件监听可以给一个元素添加不同的事件，或者添加相同的事件但是执行不同的操作。 那你可能会说为什么直接给元素的事件赋值呢？像这样:

obj.onclick = function(){ console.log("click"); }
obj.ondblclick = function(){ console.log("doublue click"); }

但如果还想给点击事件添加新的方法，只能在原来的基础上添加代码，这样会显得很乱，一种方法就应该封装到一个函数里不是吗？如果再写一个点击事件，就会把原来的覆盖掉。这时候事件监听的优势就体现出来了，用代码说明一切吧。

var oBtn = document.getElementById("btn");
//第一个参数为事件，不用加on；第二个参数为函数名；
//第三个若为 true 则事件采用事件捕获，为false则是事件冒泡，一般情况下用false
oBtn.addEventListener("click", click1, false);
oBtn.addEventListener("click", click2, false);
oBtn.addEventListener("dblclick", dblClick, false);

function click1(){
    console.log("click 1");
}
function click2(){
    console.log("click 2");
}
function dblClick(){
    console.log("double click");
}

既然能添加那么肯定也能删除，可以用 oBtn.removeEventListener("click", click1) 移除。但上面的添加和删除方法在低版本IE浏览器都不能用，不过IE有自己的方法：

oBtn.attachEvent("onclick", click1);
oBtn.detachEvent("onclick", click1);

这里要注意IE的方法里第一个参数是带上 on 的。
下面把兼容的函数写一下

function addEventListener(obj, event, fn, boo){
    if (obj.addEventListener) {
        obj.addEventListener(event, fn, boo);
    } else {
        obj.attachEvent("on" + event, fn);
    }
}
function removeEventListener(obj, event, fn, boo){
    if (obj.removeEventListener) {
        obj.removeEventListener(event, fn, boo);
    } else {
        obj.detachEvent("on" + event, fn);
    }
}