浅谈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 相关文章推荐
js 创建快捷方式的代码(fso)
Nov 19 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
在字符串中把网址改成超级链接
2006/10/09 PHP
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
解决Python安装cryptography报错问题
2020/09/03 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
《水上飞机》教学反思
2014/04/10 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
改革共识倡议书
2014/08/29 职场文书
红色故事汇观后感
2015/06/18 职场文书
运动会1000米加油稿
2015/07/21 职场文书
学习雷锋主题班会
2015/08/14 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
java调用Restful接口的三种方法
2021/08/23 Java/Android
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers