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

浏览: 173次 来源:网络整理 作者:佚名

2021-03-18 06:18:34

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

更新时间:2016年06月30日 10:48:43 作者:汤姆大叔

这篇文章主要介绍了jQuery绑定自定义风波使用方法,通过循环绑定所有的自定义风波,在恰当的时机调用,需要的同学可以参考下。

jQuery绑定自定义事件

jquery动态绑定事件_jquery绑定自定义事件_jquery绑定自定义事件

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

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

然后通过如下方法来触发风波:

jquery绑定自定义事件_jquery动态绑定事件_jquery绑定自定义事件

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

或者你也可以为自定义风波降低额外的参数四川快乐12 ,样例如下:

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

魔法升级

所谓魔法升级jquery绑定自定义事件,其实是想使整个程序所有的自定义风波才能手动注册并绑定jQuery上,然后执行的时侯,所有注册该风波的模块就会执行。比如模块User.js里定义的UserUpdate方式和Blogs.js里定义的BlogUpdate方式都定义了在发布一篇博客的时侯须要执行的function函数四川快乐12四川快乐12欧宝体育 ,整个时侯我们可以通过注册统一的风波名称(例如BlogAdded)bind到jQuery指定的一个容器上(例如document)上,然后发布博客成功之后,执行$(document).trigger("BlodAdded")就OK了。

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

jquery绑定自定义事件_jquery动态绑定事件_jquery绑定自定义事件

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绑定自定义事件_jquery绑定自定义事件_jquery动态绑定事件

这样,不管在任何地方欧宝体育 ,如果我们须要的话亚博APP ,就可以使用jQuery的方法来触发我们的风波了:

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

通过这些方式欧宝体育 ,大家可以发觉一个模块的method只能注册一个风波,那假如我们通过一个方式来注册多个风波触发的话jquery绑定自定义事件,可以使用如下形式:

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

最后注意:本文只是展示一个简单的事例,不要混用不同module同一风波名称的用法哦亚博APP安全有保障 ,比如,User.js里的AddComplete和Blog.js里的AddComplete可能根本就没有关系,也就是说只处理自己相应的逻辑,这时候,就不应当统一处理这个风波,但假如要测量的东西是一样的话,就可以使用,比如DisableUserComplete,就可以通用,因为User模块须要处理禁用帐户之后的操作,Blog模块可能也须要处理禁用帐户之后的操作。

版权声明:本文系亚博APP-亚博APP手机版独家稿件,未经授权,不得转载。