浅谈jquery事件处理


Posted in Javascript onApril 24, 2015

在以jQuery为基础库的前端开发体系中,经常会在一个页面上通过各种标识绑定许许多多的事件。就算简单的使用了事件代理,也还是造成了事件的分散,不好维护和管理。

那么,如何解决这个问题呢?而我,想到了backbone中的events。如下:

events: {

    "click .icon":          "open",

    "click .button.edit":   "openEditDialog",

    "click .button.delete": "destroy"

  }

也就是,把事件聚集到一起,类似事件处理中心这么一个概念。

简单的理了一下实现思路:

使用事件代理的方式,将事件绑定到body节点。(某些事件自身是不冒泡的,在此暂时不做研究)

对于事件的执行对象,给一个统一标识。

事件的执行函数,集中处理。

<body>

    <div data-click-center="handler1"></div>

    <div data-click-center="handler2"></div>   

</body>

// 事件处理中心

var ClickEventCenter = {

    "handler1": function () {

        // do something...

    },

    "handler2": function () {

        // do something...

    }

    // ...

}

// 事件绑定

$body.on("click", "[data-click-center]", function () {

    var handlerName = $(this).data("click-center");

    var handler = ClickEventCenter[handlerName]
    if ($.isFunction(handler)) handler()

})

这样的话,一种类型的事件,集中到一起。

在某些时候,能够起到很好的作用。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
js实现交通灯效果
Jan 13 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
微信小程序 五星评分的实现实例
Aug 04 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 #Javascript
JS实现简单的键盘打字的效果
Apr 24 #Javascript
javascript中replace( )方法的使用
Apr 24 #Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 #Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 #Javascript
原生js制作简单的数字键盘
Apr 24 #Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 #Javascript
You might like
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
js 调整select 位置的函数
2008/02/21 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
详解vue axios中文文档
2017/09/12 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
python实现求特征选择的信息增益
2018/12/18 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
工作自我评价分享
2013/12/01 职场文书
关于保护环境的标语
2014/06/09 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
教师聘用意向书
2015/05/11 职场文书
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL