浅谈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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
JavaScript实现tab栏切换效果
Mar 16 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 危险函数解释 分析
2009/04/22 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
万能的php分页类
2017/07/06 PHP
MooTools 1.2介绍
2009/09/14 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
javascript类型转换示例
2014/04/29 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
python类继承用法实例分析
2015/05/27 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
设备售后服务承诺书
2014/05/30 职场文书
会计学毕业生求职信
2014/06/25 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
百年校庆感言
2015/08/01 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL