浅谈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 生成指定范围数值随机数
Jan 09 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
详解JavaScript数据类型和判断方法
Sep 04 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 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写的serv-u的web申请账号的程序
2006/10/09 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
filemanage功能中用到的common.js
2007/04/08 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python获取Pandas列名的几种方法
2019/08/07 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
python palywright库基本使用
2021/01/21 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
员工拾金不昧表扬信
2014/01/09 职场文书
个人委托书范本
2014/04/02 职场文书
带病坚持工作事迹
2014/05/03 职场文书
防沙治沙典型材料
2014/05/07 职场文书
课外科技活动总结
2014/08/27 职场文书
党员自我剖析材料
2014/08/31 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL