浅谈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获得当前的信息的一些常用命令
Feb 25 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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
单位速度在实战中的运用
2020/03/04 星际争霸
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
Jquery 扩展方法
2010/05/06 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python字典get()方法用法分析
2015/04/17 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
如何清空Session
2015/02/23 面试题
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL