浅谈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模块模式分析
May 16 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
详解原生JS动态添加和删除类
Mar 26 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分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
php字符集转换
2017/01/23 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
JSONP跨域请求
2017/03/02 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
理解Python垃圾回收机制
2016/02/12 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Numpy的简单用法小结
2019/08/28 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
python实现KNN近邻算法
2020/12/30 Python
python爬取抖音视频的实例分析
2021/01/19 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
师范教师毕业鉴定
2014/01/13 职场文书
平面设计师岗位职责
2014/09/18 职场文书
教师业务学习材料
2014/12/16 职场文书
党员倡议书
2015/01/19 职场文书
旗帜观后感
2015/06/08 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android