Share an encapsulated javascript event queue function code to solve the problem of binding events

There are several minor problems when using addEventListener() or attachEvent() to bind events in JavaScript:

1. Anonymous functions added using addEventListener() or attachEvent() Cannot be removed.

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

2. In ie6-ie8, the reverse order execution problem of using attachEvent() to bind multiple events.

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

Solve the problem

I want to write a cross-browser event binding module so that it can be reused in the future. At the same time, I want to solve the appeal problem. JQuery internally uses event queues and data caching mechanisms to solve this problem. I looked at the relevant source code and found that it is really complicated. I tried some methods myself and managed to achieve it. The code snippet posted was originally written in an object-oriented way. I didn't want it to be complicated, so I changed it to functions.

/*绑定事件的接口
 *
 *@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;
};

How to use

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')

The above is the detailed content of Share an encapsulated javascript event queue function code to solve the problem of binding events. For more information, please follow other related articles on the PHP Chinese website!