自己封装的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中的同名标识符优先级
Dec 06 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
小程序实现文字循环滚动动画
Jun 14 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 实例化类的一点摘记
2008/03/23 PHP
php之curl设置超时实例
2014/11/03 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
python比较两个列表大小的方法
2015/07/11 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python单例模式实例解析
2018/08/28 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
python psutil模块使用方法解析
2019/08/01 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
python绘制趋势图的示例
2020/09/17 Python
职业生涯规划书前言
2014/04/15 职场文书
企业安全生产检查制度
2015/08/06 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS