jQuery绑定自定义事件的魔法升级版


Posted in Javascript onJune 30, 2016

jQuery绑定自定义事件

首先让我们来看看jQuery绑定自定义事件的使用方法,你可以使用bind或者live来订阅一个事件(当然1.7以后也可以使用on了),代码如下:

$("#myElement").bind('customEventName',function(e){ ... });
$(".elementsClass").live('customEventName',function(e){ ... });

然后通过如下方式来触发事件:

$("#myelement").trigger('customEventName');

或者你也可以为自定义事件增加额外的参数,样例如下:

$("#myelement").bind('customEventName',function(e,data){ if(data.custom) ... });
$("#myelement").trigger('customEventName',{ custom: false });

魔法升级

所谓魔法升级,其实是想让整个程序所有的自定义事件能够自动注册并绑定jQuery上,然后执行的时候,所有注册该事件的模块都会执行。比如模块User.js里定义的UserUpdate方法和Blogs.js里定义的BlogUpdate方法都定义了在发布一篇博客的时候需要执行的function函数,整个时候我们可以通过注册统一的事件名称(例如BlogAdded)bind到jQuery指定的一个容器上(例如document)上,然后发布博客成功以后,执行$(document).trigger("BlodAdded")就OK了。

下面我们给个通用的样例代码:

var components = [User, Blog, Group, Friend, Topic, Photo];
var eventTypes = ["AddComplete", "UpdateComplete", "DeleteComplete", "LockComplete", "UnLockComplete"];
$.each(components, function(i,component) {
 $.each(eventTypes, function(i,eventType) {
  var handler = component[eventType];
  if (handler) $(document).bind(eventType, handler);
 });
})

然后每个js模块定义的代码安装如下格式:

User= {
 AddComplete: function(e, data) {
 //...
 },
 UpdateComplete: function(e, data) {
 //...
 }
}
 

这样,不管在任何地方,如果我们需要的话,就可以使用jQuery的方式来触发我们的事件了:

$(document).trigger("UpdateComplete", data);

通过这种方法,大家可以发现一个模块的method只能注册一个事件,那如果我们通过一个方法来注册多个事件触发的话,可以使用如下方式:

var blogController = {
 blogAddOrUpdateComplete: function() {
 //...
 }
}
blogController.blogAddComplete = blogController.blogUpdateComplete = blogController.blogAddOrUpdateComplete;

最后注意:本文只是展示一个简单的例子,不要混用不同module同一事件名称的用法哦,比如,User.js里的AddComplete和Blog.js里的AddComplete可能根本就没有关系,也就是说只处理自己相应的逻辑,这时候,就不应该统一处理这个事件,但如果要检测的东西是一样的话,就可以使用,比如DisableUserComplete,就可以通用,因为User模块需要处理禁用账户以后的操作,Blog模块可能也需要处理禁用账户以后的操作。

以上就是本文的全部内容,了解更多jQuery的语法,大家可以查看:《jQuery 1.10.3 在线手册》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 打印页面代码
Mar 24 Javascript
firefo xml 读写实现js代码
Jun 11 Javascript
Javascript 数组排序详解
Oct 22 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
深入理解js promise chain
May 05 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 #Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 #Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 #Javascript
浅谈JS中json数据的处理
Jun 30 #Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 #Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 #Javascript
简单实现js间歇或无缝滚动效果
Jun 29 #Javascript
You might like
PHP脚本的10个技巧(5)
2006/10/09 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
PHP 类型转换函数intval
2009/06/20 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
php强制下载类型的实现代码
2011/04/21 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
JavaScript版代码高亮
2006/06/26 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Python colormap库的安装和使用详情
2020/10/06 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
销售类个人求职信范文
2013/09/25 职场文书
公司请假条范文
2014/04/11 职场文书
美容院员工规章制度
2015/08/05 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
关于保护环境的建议书
2019/06/24 职场文书