浅谈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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 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怎样调用MSSQL的存储过程
2006/10/09 PHP
PHP 文件上传全攻略
2010/04/28 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
犀利的js 函数集合
2009/06/11 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
js控制input输入字符解析
2013/12/27 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
python实现图片九宫格分割
2021/03/07 Python
python实现程序重启和系统重启方式
2020/04/16 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
党员岗位承诺口号大全
2014/03/28 职场文书
室内设计专业自荐信
2014/05/31 职场文书
先进班组事迹材料
2014/12/25 职场文书
春节慰问简报
2015/07/21 职场文书