JavaScript 通用函數整理——添加/刪除事件處理程序

參考《JavaScript 高級程序設計（第3版）》 《JavaScript DOM 編程藝術（第2版）》

實現平穩退化和漸進增強，就必須分離結構層、表示層、行爲層。

定義跨瀏覽器的 EventUtil 對象：

2014/3/25

1、添加事件處理程序和刪除事件處理程序

var EventUtil = {

    //添加事件處理程序
    addHandler: function(element, type, handler){
        //DOM2
        if(element.addEventListener){
            element.addEventListener(type, handler, false);
        }
        //IE8-
        else if(element.attachEvent){
            element.attacheEvent("on"+type, handler);
        }
        //DOM0
        else if(typeof element["on"+type] == "function"){
            var oldFunc = element["on"+type];
            element["on"+type] = function(){
                oldFunc();
                handler();
            }
        }
        else{
            element["on"+type] = handler;
        }
    }
    //刪除事件處理程序
    removeHandler: function(element, type, handler){
        if(element.removeEventListener){
            element.removeEventListener(type, handler, false);
        }
        else if(element.detachEvent){
            element.detachEvent("on"+type, handler);
        }
        else{
            element["on"+type] = null
        }
    }

}

這兩個函數的作用在於分離結構層和行爲層。平常所見的οnclick="……" 就可以採用addHandler將處理函數添加到相應的元素中。

addHandler 函數包含3個參數，element 表示操作的目標元素，type 表示事件的名稱（如 click、load 等），handler 表示事件處理函數。removeHandler 亦是如此。
注意： addHandler 中，DOM0 方法會將原本存在的處理函數覆蓋，所以需要一個判斷，將新的處理函數添加到原有的處理函數之後。
             removeHandler 中，DOM0 方法無法指定刪除的處理函數，而是會將 element 和 type 對應的所有處理函數刪除掉。