浅谈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 this指针
Jul 30 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
JavaScript实现简单验证码
Aug 24 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 header()函数使用说明
2008/07/10 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
Python实现队列的方法
2015/05/26 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
机电专业个人自荐信格式模板
2013/09/23 职场文书
护士自我鉴定
2013/10/23 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
起诉意见书范文
2015/05/19 职场文书
谢师宴学生致辞
2015/07/27 职场文书