自己封裝的javascript事件隊(duì)列函數(shù)版_javascript技巧

javascript中使用addEventListener()或attachEvent()綁定事件時(shí)會(huì)有幾個(gè)小問題：

一、使用addEventListener()或attachEvent()添加的匿名函數(shù)無法移除。

代碼如下:var oBtn = document.getElementById('btn');

oBtn.addEventListener('click',function(){
alert('button is clicked')
},false)

oBtn.reomveEventListener('click',function(){
alert('button is clicked')
},false)
//oBtn上的事件無法移除，因?yàn)閭魅氲氖且粋€(gè)匿名函數(shù)
二、ie6-ie8中，使用attachEvent()綁定多個(gè)事件的倒序執(zhí)行問題。
代碼如下:
var oBtn = document.getElementById('btn');

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

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

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

解決問題

我想寫一個(gè)跨瀏覽器的事件綁定模塊，這樣以后可以復(fù)用，同時(shí)我想解決上訴問題。JQuery內(nèi)部使用事件隊(duì)列和數(shù)據(jù)緩存機(jī)制解決此問題，看了下相關(guān)源碼，實(shí)在復(fù)雜，自個(gè)試了一些方法，勉強(qiáng)實(shí)現(xiàn)。貼段代碼，原來是用面向?qū)ο髮懙模幌胱屓丝吹煤軓?fù)雜，所有改成函數(shù)來組織。
代碼如下:
/*綁定事件的接口
*
*@param {dom-DOM}和{type-string}和{fn-function} 可選參數(shù){fnName-string}
*@execute 創(chuàng)建事件隊(duì)列，添加到DOM對象屬性上，
將事件處理程序(函數(shù))加入事件隊(duì)列
可為事件處理程序添加一個(gè)標(biāo)識符，用于刪除指定事件處理程序
*/
function bind(dom,type,fn,fnName){
dom.eventQueue = dom.eventQueue || {};
dom.eventQueue[type] = dom.eventQueue[type] || {};
dom.handler = dom.handler || {};

if (!fnName) {
var index = queueLength(dom,type);
dom.eventQueue[type]['fnQueue'+index] = fn;
}
else {
dom.eventQueue[type][fnName] = fn;
};

if (!dom.handler[type]) bindEvent(dom,type);
};

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

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

/*移除事件的接口
*
*@param {dom-DOM}和{type-string} 可選參數(shù){fnName-function}
*@execute 如果沒有標(biāo)識符，則執(zhí)行unBindEvent()
如果有標(biāo)識符，則刪除指定事件處理程序，如果事件隊(duì)列長度為0,執(zhí)行unBindEvent()
*/
function unBind(dom,type,fnName){
var hasQueue = dom.eventQueue && dom.eventQueue[type];
if (!hasQueue) return;
if (!fnName) {
unBindEvent(dom,type)
}
else {
delete dom.eventQueue[type][fnName];
if (queueLength(dom,type) == 0) unBindEvent(dom,type);
};
};

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

delete dom.eventQueue[type];
};

/*判斷事件隊(duì)列長度
*
*@param {dom-DOM}和{type-string}
*@caller bind() unBind()
*/
function queueLength(dom,type){
var index = 0;
for (var length in dom.eventQueue[type]){
index++ ;
}
return index;
};

使用方法

代碼如下:
var oBtn = document.getElementById('btn');

//綁定事件
//為button同時(shí)綁定三個(gè)click事件函數(shù)
//ie6-ie8下執(zhí)行順序不變
bind(oBtn,'click',function(){
alert(1);
})
bind(oBtn,'click',function(){
alert(2);
},'myFn')
bind(oBtn,'click',function(){
alert(3);
})

//移除事件
//移除所有綁定的click事件函數(shù)，支持移除匿名函數(shù)
unBind(oBtn,'click')

//只移除標(biāo)識符為myfn的事件函數(shù)
unBind(oBtn,'click','myFn')

程序思路

程序主要思路就像將事件隊(duì)列作為dom元素對象的一個(gè)屬性，添加在dom元素上，而不會(huì)污染全局環(huán)境，這樣可以解決不同dom元素綁定不同事件類型的多個(gè)事件函數(shù)的數(shù)據(jù)存儲問題。

代碼如下:
//dom元素上的事件隊(duì)列
dom{
eventQueue : {
'click' : {
fnQueue1 : function,
myfn : function,
fnQueue3 : function
}

'mouseover' : {
fnQueue1 : function,
fnQueue2 : function
}
}
}

每次先把事件函數(shù)添加到對應(yīng)事件類型的事件隊(duì)列中，只綁定一次事件。觸發(fā)事件時(shí)執(zhí)行handler事件函數(shù)，handler則遍歷執(zhí)行事件隊(duì)列中的事件函數(shù)。

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

程序邏輯并不復(fù)雜，可能有bug和性能問題，有興趣可以指導(dǎo)交流下。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com