浅谈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执行顺序详细介绍
Dec 04 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
javascript实现日期按月份加减
May 15 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
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
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
php和asp语法上的区别总结
2019/05/12 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
对Python w和w+权限的区别详解
2019/01/23 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
员工团队活动方案
2014/08/28 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers