浅谈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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
js停止输出代码
Jul 20 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 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中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
Python实现简单拆分PDF文件的方法
2015/07/30 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python树的同构学习笔记
2019/09/14 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
财务分析个人的自荐书范文
2013/11/24 职场文书
元宵晚会主持词
2014/03/25 职场文书
出售房屋协议书范本
2014/10/06 职场文书
2014年创卫工作总结
2014/11/24 职场文书
2015年中个人总结范文
2015/03/10 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
涨价通知
2015/04/23 职场文书
开学随笔
2015/08/15 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技