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 相关文章推荐
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
js获取form的方法
May 06 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
浅谈TypeScript 索引签名的理解
Oct 16 Javascript
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
玩转虚拟域名◎+ .
2006/10/09 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php 强制下载文件实现代码
2013/10/28 PHP
WordPress网站性能优化指南
2015/11/18 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
yii数据库的查询方法
2015/12/28 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python中qutip用法示例详解
2020/10/02 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
售后主管岗位职责
2013/12/08 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
中学总务处工作总结
2015/08/12 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js