自己封裝的javascript事件佇列函數版_javascript技巧

背景

javascript使用addEventListener()或attachEvent()綁定事件時會有幾個小問題：

一、使用addEventListener()或attachEvent()新增的匿名函式無法移除。

複製程式碼 程式碼如下:

var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
    alert('button is clicked')
},false)
    alert('button is clicked')
},false)
//oBtn上的事件無法移除，因為傳入的是匿名函數

二、ie6- ie8中，使用attachEvent()綁定多個事件的倒序執行問題。

複製程式碼 程式碼如下:

var oBtn = document.getElementBy2ument.getElementBydument');

oBtn.attachEvent('onclick',function(){
    alert(1)
})

oBtn.attachEvent('onclick',function(){
oBtn.attachEvent('onclick',function(){
    alert(2)
})

oBtn.attachEvent('onclick',function(){
    alert(3)})
//ie 執行順序、2、3
//ie6-ie8下執行順序3、2、1

解決問題

我想寫一個跨瀏覽器的事件綁定模組，這樣以後可以重複使用，同時我想解決上訴問題。 JQuery內部使用事件佇列和資料快取機制解決此問題，看了下相關源碼，實在複雜，自個試了一些方法，勉強實現。貼段程式碼，原來是用物件導向寫的，不想讓人看得很複雜，所有改成函數來組織。

複製程式碼 程式碼如下:

/*綁定事件的介面
 *
 *@param    {dom-DOM}和{type-string}和{fn-function}  選用參數{fnName-string}
 *@execute  建立事件佇列，新增至DOM物件屬性上，
            將事件處理程序(函數)加入事件佇列
   >  */
 function bind(dom,type,fn,fnName){
    dom.eventQueue = dom.eventQueue || {};
   | {};
    dom.handler = dom.handler || {};

    if (!fnName) {
     Queue [type]['fnQueue' index] = fn;
    }
    else {
        dom. if (! dom.handler[type]) bindEvent(dom,type);
};

/*綁定事件
 *
 *@param    {dom-DOM}和{type-string }
 *@execute  只綁定一次事件，handler用於遍歷執行事件佇列中的事件處理程序(函數)
 *@caller   bind()
 */
function bindEvent(dom, type){
    dom.handler[type] = function(){
        for(var guid in dom.eventQueue[type]){ ;
        }
    };

    if (window.addEventListener) {
    if (window.addEvent.   }
    else {
        dom.attachEvent('on' type,dom.handler[type]);
    };
};

/*清除事件的介面 *@param    {dom-DOM}與{type-string} 選用參數{fnName-function}
 *@execute  若沒有識別符，執行unBindEvent()
  事件處理程序，若事件佇列長度為0,執行unBindEvent()
  */
function unBind(dom,type,fnName){
    var hasQueue = dom.eventQueue & type.
    if (!hasQueue) return;
    if (!fnName) {
        unBind     delete dom.eventQueue[type][fnName] ;
        if (queueLength(dom,type) == 0) unBindEvent(dom,type);
    };
};
    };
};

 *@param    {dom-DOM}和{type-string}
 *@execute  移除綁定的事件處理程序handler，並清空事件佇列
 *@caller   unBind()
 */
function unBindEvent(dom,type){
    if (window.removeEventListener) {
        dom.rem 🎜>        dom. detachEvent(type,dom.handler[type])
    }

    delete dom.eventQueue[type];
};

/*判斷隊列長度
 *@param    {dom-DOM}和{type-string}
 *@caller   bind() unBind()
 */
function queueLength()
 */
function queueLength()
 */    for (var length in dom.eventQueue[type]){
        index ;
    }
使用方法






複製程式碼


程式碼如下:

var oBtn = document.getElementById('btn');

//綁定事件
//為button同時綁定三個click事件函數
//ie6 -ie8下執行順序不變
bind(oBtn,'click',function(){
    alert(1);
})
bind(oBtn,'click',function(){
    alert(2);
},'myFn')
bind(oBtn,'click',function(){
    alert(3);
}
    alert(3);
})
>//移除事件
//移除所有綁定的click事件函數，支援移除匿名函數
unBind(oBtn,'click')

//只移除識別符myfn的事件函數
unBind(oBtn,'click','myFn')

程序思路

程式主要想法就像將事件佇列作為dom元素物件的一個屬性，添加在dom元素上，而不會污染全域環境，這樣可以解決不同dom元素綁定不同事件類型的多個事件函數的數據儲存問題。

複製程式碼

程式碼如下:

//dom元素上的事件隊列
dom
dom
dom
dom
dom {
    eventQueue : {
        'click' : {
         fn     : function,
            fnQueue3 : function
      
            fnQueue1 : function,
            fn 🎜>}

每次先把事件函數加入對應事件類型的事件佇列中，只綁定一次事件。觸發事件時執行handler事件函數，而handler則遍歷執行事件佇列中的事件函數。

unBind()如果沒有傳入標識符，則移除所有綁定的事件函數，支援移除匿名函數，如果有標識符則移除指定的事件函數。

程式邏輯並不複雜，可能有bug和效能問題，有興趣可以指導交流下。