自己封装的javascript事件队列函数版(2)

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元素上的事件队列
dom{
    eventQueue : {
        'click' : {
            fnQueue1 : function,
            myfn     : function,
            fnQueue3 : function
        }

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

每次先把事件函数添加到对应事件类型的事件队列中，只绑定一次事件。触发事件时执行handler事件函数，handler则遍历执行事件队列中的事件函数。

unBind()如果没有传入标识符，则移除所有绑定的事件函数，支持移除匿名函数，如果有标识符则移除指定的事件函数。

程序逻辑并不复杂，可能有bug和性能问题，有兴趣可以指导交流下。

您可能感兴趣的文章: