自己封装的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 相关文章推荐
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
vue组件之间的数据传递方法详解
Apr 19 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
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
Python subprocess模块常见用法分析
2018/06/12 Python
详解Python 函数参数的拆解
2020/09/02 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
美工的岗位职责
2013/11/14 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
艺术节主持词
2014/04/02 职场文书
作弊检讨书
2015/01/27 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
60句有关成长的名言
2019/09/04 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
Python类方法总结讲解
2021/07/26 Python
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技