與事件處理相關的function：addEventListener、removeEventListener與attachEvent、detachEvent

addEventListener、removeEventListener與attachEvent、detachEvent，前者大部分主流浏覽器都支援，為W3C标準，IE8以及更早版本不支援，後者支援IE浏覽器

addEventListener向指定元素添加事件句柄，文法為：

event：事件名稱（不含on）比如“click”、“keydown”等

function：指定事件觸發時執行的函數

usecapture：指定事件是否在捕獲或者冒泡階段執行（true：在捕獲階段執行；false：預設，在冒泡階段執行）

document.getElementById("btnclick").addEventListener("click",function(){
///代碼塊
},false)
           

removeEventListener向指定元素移除由addEventListener方法添加的事件句柄，文法為：

ele.removeEventListener(event,function,usecapture)  
//其中移除時傳入的參數與添加addEventListener時傳入的參數相同，這也就是說通過addEventListener添加的匿名函數無法移除
           

下面的執行個體則不能夠删除addEventListener

var btnclick = document.getElementById("btnclick");
btnclick.addEventListener("click",function(){
    /代碼塊
},false);
btnclick.removeEventListener("click",function(){
    代碼塊
},false);
           

如果想要進行removeEventListener則先定義function：

function f1(){
    /代碼塊
}
var btnclick = document.getElementById(“btnclick”);
btnclick.addEventListener("click",f1,false);
btnclick.removeEventListener("click",f1,false);
           

attachEvent作用與addEventListener一樣，向指定元素添加事件句柄，文法為：

event：事件名稱（含有on）比如“onclick”、“onkeydown”等

function：指定事件觸發時執行的函數

document.getElementById("btnclick").attachEvent("onclick",function(){
///代碼塊
})
           

IE隻支援事件冒泡，不存在事件捕捉

detachEvent作用與removeEventListener功能類似，不過是移除由attachEvent定義的事件，文法為：

ele.detachEvent(event,function)
    ////其中移除時傳入的參數與添加attachEvent時傳入的參數相同，這也就是說通過attachEvent添加的匿名函數無法移除,這點和removeEventListener一樣
           

可以将addEvevtListener和attachEvent整合在一個函數中

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    } else if (elm.attachEvent) {
        var r = elm.attachEvent(‘on‘ + evType, fn);
        return r;
    } else {
        elm['on' + evType] = fn;//DOM 0
    }
}

           

下面這個是在别的網址上看到的：

var addEvent=(function(){
    if(document.addEventListener){
        return function(el,type,fn){
            if(el.length){
                        for(var i=;i<el.length;i++){
                            addEvent(el[i],type,fn);
                        }
            } else {
                        el.addEventListener(type,fn,false);
               }
        };
    } else {
        return function(el,type,fn){
            if(el.length){
                        for(var i=;i<el.length;i++){
                            addEvent(el[i],type,fn);
                        }
             }else{
                        el.attachEvent('on'+type,function(){
                            return fn.call(el,window.event);
                        });
                }
        };
        }
})();