浅谈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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
jquery.ui.progressbar 中文文档
Nov 26 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
AngularJS执行流程详解
Feb 17 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
详解ES6系列之私有变量的实现
Nov 21 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
如何在JavaScript中使用localStorage详情
Feb 04 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设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
类之Prototype.js学习
2007/06/13 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
js jquery数组介绍
2012/07/15 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
python实现求特征选择的信息增益
2018/12/18 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
python3.4中清屏的处理方法
2020/07/06 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
超市业务员岗位职责
2013/12/05 职场文书
有创意的广告词
2014/03/18 职场文书
土建施工员岗位职责
2014/07/16 职场文书
中小学生学籍证明
2014/10/25 职场文书
大连导游词
2015/02/12 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
总结一些Java常用的加密算法
2021/06/11 Java/Android