JavaScript 事件队列封装：解决匿名函数移除与 IE 执行顺序问题

JavaScript 事件队列封装：解决匿名函数移除与 IE 执行顺序问题

背景

在 JavaScript 开发中，利用 addEventListener() 或 attachEvent() 方法绑定事件时，常会遇到以下两个主要痛点：

首先，通过 addEventListener() 或 attachEvent() 添加的匿名函数无法被移除。

var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
alert('button is clicked')
},false)
oBtn.reomveEventListener('click',function(){
alert('button is clicked')
},false)
//oBtn上的事件无法移除，因为传入的是一个匿名函数

其次，在 IE6 至 IE8 浏览器中，使用 attachEvent() 绑定多个事件时，会存在执行顺序倒置的问题。

var oBtn = document.getElementById('btn');
oBtn.attachEvent('onclick',function(){
alert(1)
})
oBtn.attachEvent('onclick',function(){
alert(2)
})
oBtn.attachEvent('onclick',function(){
alert(3)
})
//ie9+ 下执行顺序1、2、3
//ie6-ie8下执行顺序3、2、1

解决方案

解决方案

为了编写一个可复用的跨浏览器事件绑定模块，并解决上述问题，我参考了 jQuery 内部使用的事件队列和数据缓存机制。虽然 jQuery 源码较为复杂，但我尝试通过函数式编程方式自行实现了一套简易方案。代码如下：

/*绑定事件的接口
 *
*@param {dom-DOM}和{type-string}和{fn-function} 可选参数{fnName-string}
*@execute 创建事件队列，添加到DOM对象属性上，
将事件处理程序(函数)加入事件队列
可为事件处理程序添加一个标识符，用于删除指定事件处理程序
  */
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用于遍历执行事件队列中的事件处理程序(函数)
*@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} 可选参数{fnName-function}
*@execute 如果没有标识符，则执行unBindEvent()
如果有标识符，则删除指定事件处理程序，如果事件队列长度为0,执行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，并清空事件队列
*@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];
};
/*判断事件队列长度
 *
*@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同时绑定三个click事件函数
//ie6-ie8下执行顺序不变
bind(oBtn,'click',function(){
alert(1);
})
bind(oBtn,'click',function(){
alert(2);
},'myFn')
bind(oBtn,'click',function(){
alert(3);
})
//移除事件
//移除所有绑定的click事件函数，支持移除匿名函数
unBind(oBtn,'click')
//只移除标识符为myfn的事件函数
unBind(oBtn,'click','myFn')

程序思路

程序思路

该方案的核心思想是将事件队列作为 DOM 元素对象的一个属性进行存储，从而避免污染全局环境。这种设计能够有效区分不同 DOM 元素绑定不同事件类型的多个处理程序，实现数据的隔离存储。

//dom元素上的事件队列
dom{
eventQueue : {
'click' : {
fnQueue1 : function,
myfn : function,
fnQueue3 : function
        }
'mouseover' : {
fnQueue1 : function,
fnQueue2 : function
        }
    }
}

具体流程为：首先将事件处理函数添加到对应事件类型的事件队列中，且仅绑定一次实际事件。当触发事件时，执行统一的 handler 函数，该 handler 会遍历并依次执行事件队列中的所有处理函数。

在 unBind() 操作中，若未传入标识符，则移除所有绑定的事件函数（包括匿名函数）；若传入了标识符，则仅移除指定的事件函数。

该程序逻辑相对简单，可能存在潜在的 bug 或性能瓶颈，欢迎有兴趣的开发者指导交流。