自己封装的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 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
JavaScript构造函数详解
Dec 27 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
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设计模式 Adapter(适配器模式)
2011/06/26 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP对象相关知识总结
2017/04/09 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Django使用rest_framework写出API
2020/05/21 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
python中如何设置代码自动提示
2020/07/15 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
中班中秋节活动反思
2014/02/18 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
财务会计专业求职信
2014/06/09 职场文书
流动人口婚育证明
2014/10/19 职场文书
公司员工辞职信范文
2015/05/12 职场文书