第一百三十六節，JavaScript，封裝庫--事件綁定

JavaScript，封裝庫--事件綁定

 

在函數庫添加兩個函數

添加事件綁定函數

刪除事件綁定函數

 

添加事件綁定函數

/** addEvent()函數庫函數，跨瀏覽器添加事件綁定,注意：傳入事件名稱時不要on
 * 接收3個參數
 * 參數1要綁定事件的元素對象，
 * 參數2事件名稱，也就是什麼事件，注意：傳入事件名稱時不要on
 * 參數3接收的事件執行函數
 * 注意：一個元素對象，執行了多個相同的事件函數時只執行一次，其餘的會被忽略，注意是相同的事件函數
 * 說明：
 * 事件函數裏的this，表明綁定事件元素對象自己
 * 事件函數裏有一個可選參數e,e接收的元素event對象，傳入addEvent()後跨瀏覽器獲取到元素event對象，將元素event對象賦值給e
 * 因此事件函數裏的e,表明元素event對象，前提是首先要在事件函數傳參e後，再在事件函數裏調用e,獲得元素event對象
 * e.preventDefault()方法，在事件函數裏寫e.preventDefault()方法，兼容瀏覽器阻止事件元素對象默認行爲，前提在事件函數要傳參e
 * e.stopPropagation()方法，在事件函數裏寫e.stopPropagation()方法，阻止元素對象的父級元素事件冒泡行爲，前提在事件函數要傳參e
 **/
function addEvent(obj, type, fn) {
    if (typeof obj.addEventListener != 'undefined') {
        obj.addEventListener(type, fn, false);
    } else {
        //建立一個存放事件的哈希表(散列表)
        if (!obj.events) obj.events = {};
        //第一次執行時執行
        if (!obj.events[type]) {
            //建立一個存放事件處理函數的數組
            obj.events[type] = [];
            //把第一次的事件處理函數先儲存到第一個位置上
            if (obj['on' + type]) obj.events[type][0] = fn;
        } else {
            //同一個註冊函數進行屏蔽，不添加到計數器中
            if (addEvent.equal(obj.events[type], fn)) return false;
        }
        //從第二次開始咱們用事件計數器來存儲
        obj.events[type][addEvent.ID++] = fn;
        //執行事件處理函數
        obj['on' + type] = addEvent.exec;
    }
}
/*-------------------------------------------------------------------------------------*/
//爲每一個事件分配一個計數器
//JS一切皆爲對象，因此addEvent.ID語法正確，其實是個全局變量
addEvent.ID = 1;
//執行事件處理函數
addEvent.exec = function (event) {
    var e = event || addEvent.fixEvent(window.event);
    var es = this.events[e.type];
    for (var i in es) {
        es[i].call(this, e);
    }
};
//同一個註冊函數進行屏蔽
addEvent.equal = function (es, fn) {
    for (var i in es) {
        if (es[i] == fn) return true;
    }
    return false;
};
//把IE經常使用的Event對象配對到W3C中去
addEvent.fixEvent = function (event) {
    event.preventDefault = addEvent.fixEvent.preventDefault;
    event.stopPropagation = addEvent.fixEvent.stopPropagation;
    return event;
};
//IE阻止默認行爲
addEvent.fixEvent.preventDefault = function () {
    this.returnValue = false;
};
//IE取消冒泡
addEvent.fixEvent.stopPropagation = function () {
    this.cancelBubble = true;
};
/*---------------------------------------------------------------------------------------*/

 

刪除事件綁定函數

/** removeEvent()函數庫函數，跨瀏覽器刪除事件綁定,注意：傳入事件名稱時不要on
 * 接收3個參數
 * 參數1接收事件綁定時的元素對象
 * 參數2接收事件綁定時的事件名稱，也就是什麼事件，注意：傳入事件名稱時不要on
 * 參數3接收事件綁定時的執行函數
 **/
function removeEvent(obj, type, fn) {
    if (typeof obj.removeEventListener != 'undefined') {
        obj.removeEventListener(type, fn, false);
    } else {
        for (var i in obj.events[type]) {
            if (obj.events[type][i] == fn) {
                delete obj.events[type][i];
            }
        }
    }
}