跨瀏覽器的事件處理程序?qū)崿F(xiàn)總結(jié)

CHENGKANG 發(fā)布于2019-08-22 10:47 / 2912人閱讀

摘要：本文章需要一些前置知識事件基礎(chǔ)知識對象詳解圍繞著如何更好地實(shí)現(xiàn)一個(gè)跨瀏覽器的事件處理小型庫展開討論。處理垃圾回收過濾觸發(fā)或刪除一些處理程序解綁特定類型的所有事件克隆事件處理程序依照這樣的一個(gè)思路，我們來一步步實(shí)現(xiàn)這樣一個(gè)模塊。

本文章需要一些前置知識

事件基礎(chǔ)知識

event對象詳解

圍繞著如何更好地實(shí)現(xiàn)一個(gè)跨瀏覽器的事件處理小型庫展開討論。

1. 初步實(shí)現(xiàn)

在《JavaScript高級程序設(shè)計(jì)》中提供了一個(gè)EventUtil的對象，里面實(shí)現(xiàn)了一個(gè)跨瀏覽器的事件綁定的API

var EventUtil = {
    addHandler : function (el, type, handler) {
        if(el.addEventListener) {
            el.addEventListener(type, handler, false);
        } else if (el.attachEvent)(
            el.attachEvent("on" + type, handler);
        ) else {
            el["on" + type] = handler;
        }
    },
    removeHandler : function (el, type, handler) {
        if(el.removeEventListener) {
            el.removeEventListener(type, handler);
        } else if (el.detachEvent) {
            el.detachEvent("on" + type, handler);
        } else {
            el["on" + type] = null;
        }
    }
}

這是實(shí)現(xiàn)其實(shí)較為的簡單直觀，但是對于IE瀏覽器的處理其實(shí)有不好的地方，例如我們都知道attachEvent()中的事件處理程序會在全局作用域下執(zhí)行，那么函數(shù)中的this就會指向window對象，這是一個(gè)問題，當(dāng)然我們也可以對handler進(jìn)行處理，綁定handler的函數(shù)作用域。此外，EventUtil并沒有對event對象進(jìn)行處理，因此傳入handler的event也需要做兼容性處理，在封裝方面做的就不好，編寫handler時(shí)需要注意的地方就比較多。

var handler = function (event) {
    // 對event對象做兼容性處理，例如獲取target等
};

// 綁定函數(shù)作用域
handler = handler.bind(el);

2. 更好的實(shí)現(xiàn)

下面是Dean Edward的實(shí)現(xiàn)，這也是jquery所借鑒的，拋棄掉attachEvent方法，直接使用跨瀏覽器的實(shí)現(xiàn)方式，即el.onXXX = handler，這種方式的確定就是無法綁定多個(gè)，會進(jìn)行覆蓋，但是可以利用一些技巧來彌補(bǔ)。

// written by Dean Edwards, 2005
// with input from Tino Zijdel, Matthias Miller, Diego Perini
// http://dean.edwards.name/weblog/2005/10/add-event/

function addEvent(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else {
        // assign each event handler a unique ID
        if (!handler.$$guid) handler.$$guid = addEvent.guid++;
        // create a hash table of event types for the element
        if (!element.events) element.events = {};
        // create a hash table of event handlers for each element/event pair
        var handlers = element.events[type];
        if (!handlers) {
            handlers = element.events[type] = {};
            // store the existing event handler (if there is one)
            if (element["on" + type]) {
                handlers[0] = element["on" + type];
            }
        }
        // store the event handler in the hash table
        handlers[handler.$$guid] = handler;
        // assign a global event handler to do all the work
        element["on" + type] = handleEvent;
    }
};
// a counter used to create unique IDs
addEvent.guid = 1;

function removeEvent(element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
    } else {
        // delete the event handler from the hash table
        if (element.events && element.events[type]) {
            delete element.events[type][handler.$$guid];
        }
    }
};

function handleEvent(event) {
    var returnValue = true;
    // grab the event object (IE uses a global event object)
    event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
    // get a reference to the hash table of event handlers
    var handlers = this.events[event.type];
    // execute each event handler
    for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        if (this.$$handleEvent(event) === false) {
            returnValue = false;
        }
    }
    return returnValue;
};

function fixEvent(event) {
    // add W3C standard event methods
    event.preventDefault = fixEvent.preventDefault;
    event.stopPropagation = fixEvent.stopPropagation;
    return event;
};
fixEvent.preventDefault = function() {
    this.returnValue = false;
};
fixEvent.stopPropagation = function() {
    this.cancelBubble = true;
};

這段代碼其實(shí)是對IE瀏覽器事件綁定的一個(gè)修補(bǔ)，特別是舊版本的（IE8及更早的版本）。jquery借鑒了這樣的一個(gè)思路，寫出了兼容各個(gè)瀏覽器的event模塊。

3. jquery的實(shí)現(xiàn)思路

在《JavaScript忍者秘籍》中，給出了一個(gè)更加高級的實(shí)現(xiàn)，他使用一個(gè)中間事件處理程序，并將所有的處理程序都保存在一個(gè)多帶帶的對象上，最大化地控制處理的過程，這樣做有幾個(gè)好處：

規(guī)范處理程序的上下文，這個(gè)指的是作用域的問題，正常來說，元素的事件處理程序的上下文應(yīng)該就是元素本身，即this === el為true。

修復(fù)Event對象的屬性，通過兼容性的處理，來達(dá)到與標(biāo)準(zhǔn)無異。

處理垃圾回收

過濾觸發(fā)或刪除一些處理程序

解綁特定類型的所有事件

克隆事件處理程序

依照這樣的一個(gè)思路，我們來一步步實(shí)現(xiàn)這樣一個(gè)模塊。

3.1 修復(fù)Event對象的屬性

修復(fù)主要針對一些重要的屬性進(jìn)行修復(fù)，結(jié)合上一節(jié)的內(nèi)容，有以下代碼：

function fixEvent(event) {
    function returnTrue () {return true;}
    function returnFalse () {return false;}

    if(!event || !event.stopPropagation) { // 判斷是否需要修復(fù)
        var old = event || window.event; // IE的event從window對象中獲取

        event = {}; // 復(fù)制原有的event對象的屬性

        for(var prop in old) {
            event[prop] = old[prop];
        }

        // 處理target
        if(!event.target) {
            event.target = event.srcElement || document;
        }

        // 處理relatedTarget
        event.relatedTarget = event.fromElement === event.target ? 
                                        event.toElement : 
                                        event.fromElement;
        
        // 處理preventDefault
        event.preventDefault = function () {
            event.returnValue = false;
            // 標(biāo)識，event對象是否調(diào)用了preventDefault函數(shù)
            event.isDefaultPrevented = returnTrue; 
        }
        /*
            可以調(diào)用event.isDefaultPrevented()來查看是否調(diào)用event.preventDefault
        */
        event.isDefaultPrevented = returnFalse; 

        event.stopPropagation = function () {
            event.cancelBubble = true;
            event.isPropagationStopped = returnTrue;
        }

        event.isPropagationStopped = returnFalse;

        // 阻止事件冒泡，并且阻止執(zhí)行其他的事件處理程序
        // 借助標(biāo)識位，可以在后面進(jìn)行handlers隊(duì)列處理的時(shí)候使用
        event.stopImmediatePropagation = function () {
            event.isImmediatePropagationStopped = returnTrue;
            event.stopPropagation();
        }

        event.isImmediatePropagationStopped = returnFalse;

        // 鼠標(biāo)坐標(biāo)，返回文檔坐標(biāo)
        if(event.clientX != null){
            var doc = document.documentElement, body = document.body;

            event.pageX = event.clientX +
                (doc && doc.scrollLeft || body && body.scrollLeft || 0) - 
                (doc && doc.clientLeft || body && body.clientLeft || 0);
            
            event.pageY = event.clientY +
                (doc && doc.scrollTop || body && body.scrollTop || 0) -
                (doc && doc.clientTop || body && body.clientTop || 0);
        }
    
        event.which = event.charCode || event.keyCode;

        // 鼠標(biāo)點(diǎn)擊模式 left -> 0 middle -> 1 right -> 2
        if(event.button != null){
            event.button = (event.button & 1 ? 0 : 
                    (event.button & 4 ? 1 : 
                        (event.button & 2 ? 2 : 0)));
        }
    }
    return event;
}

3.2 中央對象保存dom元素信息

這個(gè)的目的是為了給元素建立一個(gè)映射，標(biāo)識元素和存儲相關(guān)聯(lián)的信息(事件類型和對應(yīng)的事件處理程序)，在jquery里面使用的是selector，在《JavaScript忍者秘籍》中，使用的是guid。

var cache = {},
    guidCounter = 1,
    expando = "data" + (new Date).getTime();

function getData(el) {
    var guid = el[expando];
    if(!guid){
        guid = el[expando] = guidCounter++;
        cache[guid] = {};
    }
    return cache[guid];
}

function removeData(el) {
    var guid = el[expando];
    if(!guid) return;
    delete cache[guid];
    try {
        delete el[expando];
    } catch(e){
        if(el.removeAttribute){
            el.removeAttribute(expando);
        }
    }
}

3.3 綁定事件處理程序

var nextGuid = 1;

function addEvent(el, type, fn) {
    
    var data = getData(el);

    if(!data.handlers)data.handlers = {};

    if(!data.handlers[type])data.handlers[type] = [];

    // 給事件處理程序賦予guid，便于后面刪除
    if(!fn.guid)fn.guid = nextGuid++;

    data.handlers[type].push(fn);

    // 為該元素的事件綁定統(tǒng)一的回調(diào)處理程序
    if(!data.dispatcher) {
        // 是否啟用data.dispatcher
        data.disabled = false;
        data.dispatcher = function (event) {
            if(data.disabled)return;
            event = fixEvent(event);
            var handlers = data.handlers[event.type];
            if(handlers) {
                for(var i = 0, len = handlers.length; i < len; i++){
                    handlers[i].call(el, event);
                }
            }
        };
    }

    // 將統(tǒng)一的回調(diào)處理程序注冊到，僅在第一次注冊的時(shí)候需要
    if(data.handlers.length === 1){
        if(el.addEventListener){
            el.addEventListener(type, data.dispatcher, false);
        } else (el.attachEvent) {
            el.attachEvent("on" + type, data.dispatcher);
        }
    }
}

3.4 清理資源

綁定了事件，就還需要一個(gè)解綁事件，因?yàn)槲覀兪褂玫氖俏刑幚沓绦騺砜刂铺幚砹鞒蹋皇侵苯咏壎ㄌ幚沓绦颍砸膊荒苤苯邮褂脼g覽器提供的解綁函數(shù)來處理。在這里，我們需要手動來清理一些資源，清理的順序從小到大。

function isEmpty(o){
    for(var prop in o){
        return false;
    }
    return true;
}

function tidyUp(el, type) {
    var data = getData(el);

    // 清理el的type事件的回調(diào)程序
    if(data.handlers[type].length === 0) {
        delete data.handlers[type];

        if(el.removeEventListener){
            el.removeEventListener(type, data.dispatcher, false);
        } else if(el.detachEvent){
            el.detachEvent("on" + type, data.dispatcher);
        }
    }

    // 判斷是否還有其他類型的事件處理程序，如果沒有則進(jìn)一步清除
    if(isEmpty(data.handlers)){
        delete data.handlers;
        delete data.dispatcher;
    }

    // 判斷是否還需要data對象
    if(isEmpty(data)) {
        removeData(el);
    }
}

3.5 解綁事件處理程序

為了盡可能保持靈活，提供了以下的功能

將一個(gè)元素的所有綁定事件進(jìn)行解綁

removeEvent(el);

將一個(gè)元素特定類型的所有事件進(jìn)行解綁

removeEvent(el, "click");

將一個(gè)元素的特定處理程序進(jìn)行解綁

removeEvent(el, "click", handler);

function removeEvent(el, type, fn) {
    var data = getData(el);

    if(!data.handlers)return;

    var removeType = function(t) {
        data.handlers[t] = [];
        tidyUp(el, t);
    };

    // 刪除所有的處理程序
    if(!type){
        for(var t in data.handlers){
            removeType(t);
        }
        return;
    }

    var handlers = data.handlers[type];
    if(!handlers)return;

    // 刪除特定類型的所有事件處理程序
    if(!fn){
        removeType(type);
        return;
    }

    // 刪除特定的事件處理程序，這個(gè)時(shí)候根據(jù)guid來進(jìn)行刪除
    // 這里需要考慮的就是可能一個(gè)事件處理程序被綁定到一個(gè)事件類型多次
    // 因此，這里需要用到handlers.length，刪除的時(shí)候，需要n--
    if(fn.guid) {
        for(var n = 0; n < handlers.length; n++){ 
            if(handlers[n].guid === fn.guid){
                handlers.splice(n--, 1);
            }
        }
    }

    // 返回之前進(jìn)行資源清理
    tidyUp(el, type);
}

到這里，我們就得到一個(gè)既保證通用性又保證性能的事件監(jiān)聽處理模塊，然而事件的知識并不僅僅這么一點(diǎn)，本章節(jié)的內(nèi)容將會繼續(xù)出現(xiàn)在接下來的幾個(gè)小節(jié)，一起構(gòu)建一個(gè)完整的event體系的代碼庫。

4. 參考

《JavaScript高級程序設(shè)計(jì)》

《JavaScript忍者秘籍》

addEvent

5. 來源

個(gè)人博客

GPU云服務(wù)器云服務(wù)器事件處理程序 js事件處理程序 jquery的事件處理 asp中的事件處理

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91274.html

發(fā)表評論

登陸后可評論

0條評論

CHENGKANG

男|高級講師

我要關(guān)注我要私信

TA的文章

一個(gè)奔四程序員的焦慮

閱讀 952·2021-09-26 09:55
如何上傳東西到虛擬主機(jī)-虛擬主機(jī)怎么上傳文件？

閱讀 3205·2021-09-22 15:36
【NameSilo】最新可用優(yōu)惠碼及商家當(dāng)前促銷域名，.cc域名$3.99，.co域名$2.99

閱讀 2989·2021-09-04 16:48
hivalidity：起步$5/月，1Gbps帶寬，SSD硬盤，可選擇印度VPS（孟買、諾伊達(dá)）/美

閱讀 3147·2021-09-01 11:41
微信小程序教學(xué)第三章（含視頻）：小程序中級實(shí)戰(zhàn)教程：列表-靜態(tài)頁面制作

閱讀 2598·2019-08-30 13:49
Google搜索滅霸彩蛋的實(shí)現(xiàn)效果

閱讀 1497·2019-08-29 18:46
函數(shù)節(jié)流和防抖

閱讀 3553·2019-08-29 17:28
HTML-CSS

閱讀 3433·2019-08-29 14:11

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

跨瀏覽器的事件處理程序?qū)崿F(xiàn)總結(jié)

相關(guān)文章

**DOM事件總結(jié)（一）**

**跨瀏覽器的事件代理**

**javaScript跨瀏覽器事件處理程序**

**前端知識點(diǎn)總結(jié)——JQ**

高程3總結(jié)#第21章Ajax與Comet

發(fā)表評論

0條評論

CHENGKANG

男|高級講師

TA的文章

一個(gè)奔四程序員的焦慮

如何上傳東西到虛擬主機(jī)-虛擬主機(jī)怎么上傳文件？

【NameSilo】最新可用優(yōu)惠碼及商家當(dāng)前促銷域名，.cc域名$3.99，.co域名$2.99

hivalidity：起步$5/月，1Gbps帶寬，SSD硬盤，可選擇印度VPS（孟買、諾伊達(dá)）/美

微信小程序教學(xué)第三章（含視頻）：小程序中級實(shí)戰(zhàn)教程：列表-靜態(tài)頁面制作

Google搜索滅霸彩蛋的實(shí)現(xiàn)效果

函數(shù)節(jié)流和防抖

HTML-CSS

最新活動