浅谈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 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
jquery控制listbox中项的移动并排序
Nov 12 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
javascript正则表达式总结
Feb 29 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
layui使用label标签的方法
Sep 14 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
Postman参数化实现过程及原理解析
Aug 13 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
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python连接池实现示例程序
2013/11/26 Python
浅谈Python 对象内存占用
2016/07/15 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Python修改列表值问题解决方案
2020/03/06 Python
python 的topk算法实例
2020/04/02 Python
pytorch中index_select()的用法详解
2021/01/06 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
见习期自我鉴定
2013/11/07 职场文书
工程承诺书怎么写
2014/05/24 职场文书
单位活动策划方案
2014/08/17 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
肖申克救赎观后感
2015/06/02 职场文书
旗帜观后感
2015/06/08 职场文书