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


Posted in Javascript onJune 12, 2014

背景

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内部使用事件队列和数据缓存机制解决此问题,看了下相关源码,实在复杂,自个试了一些方法,勉强实现。贴段代码,原来是用面向对象写的,不想让人看得很复杂,所有改成函数来组织。

/*绑定事件的接口
 *
 *@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元素上的事件队列
dom{
    eventQueue : {
        'click' : {
            fnQueue1 : function,
            myfn     : function,
            fnQueue3 : function
        }        'mouseover' : {
            fnQueue1 : function,
            fnQueue2 : function
        }
    }
}

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

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

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

Javascript 相关文章推荐
JavaScript的9种继承实现方式归纳
May 18 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
centos 上快速搭建ghost博客方法分享
May 23 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 Javascript
jquery动态添加删除一行数据示例
Jun 12 #Javascript
checkbox勾选判断代码分析
Jun 11 #Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 #Javascript
js获取日期:昨天今天和明天、后天
Jun 11 #Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 #Javascript
删除javascript中注释语句的正则表达式
Jun 11 #Javascript
Jquery自定义button按钮的几种方法
Jun 11 #Javascript
You might like
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php 动态执行带有参数的类方法
2009/04/10 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
python中的set实现不重复的排序原理
2018/01/24 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
机械系大学毕业生推荐信
2013/11/27 职场文书
农村婚礼证婚词
2014/01/08 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
保安公司服务承诺书
2014/05/28 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
2016年少先队活动总结
2016/04/06 职场文书
python中取整数的几种方法
2021/11/07 Python