浅谈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 相关文章推荐
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
vue组件通信传值操作示例
Jan 08 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
js微信分享API
2020/10/11 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
关于 angularJS的一些用法
2017/11/29 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python 中的lambda函数介绍
2018/10/10 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
应届生骨科医生求职信
2013/10/31 职场文书
求职信写作要突出重点
2014/01/01 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
少年闰土教学反思
2014/02/22 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript