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

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 在线手册》，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JQuery自定义事件的应用 JQuery最佳实践

    知识要点: 1,自定义事件custom events及事件的订阅 2,trigger.bind.unbind方法的使用 3,带命名空间的自定义事件 将下面内容粘贴至txt文档后再直接粘贴至firebug的控制台,运行看看. 复制代码 代码如下: /* JQuery自定义事件的应用-Javascript OO 有一帅哥叫Levin,在某公司前端设计部工作,他的主管是大帅哥A,经理是大美眉B. 领导们希望可以抽空瞄瞄这家伙每周的工作情况,于是... Levin每周一要用google doc写一份关于

  • JQuery的自定义事件代码,触发,绑定简单实例

    自定义事件触发 复制代码 代码如下: $ event.trigger("myEventName"); 自定义事件绑定 下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行. 复制代码 代码如下: $(this).bind("myEventName",function(){ alert("myEventName triggered"); });

  • jQuery自定义事件的简单实现代码

    一.需求原因虽然JQuery为我们定义了许多的事件,但是有时候还是不能满足我们的要求,故本例实现一个自定义事件实现的例子. 二.具体实现 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv=&quo

  • jQuery实现获取绑定自定义事件元素的方法

    本文实例讲述了jQuery实现获取绑定自定义事件元素的方法.分享给大家供大家参考,具体如下: (function ($) { // 自定义itemtab事件 $.fn.bind = function(types, data, fn) { // 重载jQuery.fn.bind方法,用来截获绑定自定义事件的元素 if(typeof types == 'string' && 'itemtab' == types) { var itemTouchStart = -1; // touchstart

  • Jquery 自定义事件实现发布/订阅的简单实例

    Jquery 自定义事件实现发布/订阅的简单实例 //用户点击logoff按钮时,广播一个自定义事件,给任何需要保存状态的感兴趣的观察者,然后导航到logoff页面 $('#logoff').click(function(){ $.event.trigger("logoff");//广播一个事件 window.location = "logoff.php";//导航到新页面 }); 以上这篇Jquery 自定义事件实现发布/订阅的简单实例就是小编分享给大家的全部内容

  • JQuery最佳实践之精妙的自定义事件

    恰好偶最近负责的一个可视化编辑器的开发,其中有些地方便应用了JQuery的自定义事件,而且达到了很好的效果-精简代码的同时充分利用了OO的原则. 本文以我实际应用开发过程中遇到的一个例子进一步说明"什么时候用JQuery的自定义事件以及怎么用",希望可以抛砖引玉,同时权且当是回复同学们的邮件了. Demo-Ingenious JQuery custom event JQuery最佳实践-精妙的自定义事件 问题:一个复选框X,你如何便捷地触发它的click事件的处理逻辑,但是又不改变它当

  • jQuery实现自定义事件的方法

    本文实例讲述了jQuery实现自定义事件的方法.分享给大家供大家参考.具体分析如下: jQuery是一个非常强大的工具.jQuery非常有用的功能之一是可以实现事件绑定.你可以实现创建,绑定事件,可触发自己定义的jQuery事件. 自定义事件触发 下面的代码是它自定义事件触发.你可以绑定到这个自定义事件. $event.trigger("myEventName"); 自定义事件绑定 下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行. $(this).bind("

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

    jQuery绑定自定义事件 首先让我们来看看jQuery绑定自定义事件的使用方法,你可以使用bind或者live来订阅一个事件(当然1.7以后也可以使用on了),代码如下: $("#myElement").bind('customEventName',function(e){ ... }); $(".elementsClass").live('customEventName',function(e){ ... }); 然后通过如下方式来触发事件: $("#

  • 浅谈Vue.js 组件中的v-on绑定自定义事件理解

    浅谈Vue.js 组件中的v-on绑定自定义事件理解

    每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名. 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. 下面是一个文档上面的例子: 2017年4月11日更新 <d

  • jquery绑定事件不生效的解决方法

    今天在开发前台页面时发现jquery绑定click事件,怎么都不生效.代码如下: 1.html:<input id="ceshisub" type="button" value="单击事件" > 2.html引用的test.js中的方法函数: 复制代码 代码如下: $("#ceshisub").bind("click",function(){ var a=1; a +=1; alert(&quo

  • jQuery中dom元素上绑定的事件详解

    jQuery中dom元素上绑定的事件详解

    作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧. 查看原生绑定的事件函数代码 所谓原生就是通过addEventListener方法绑定到dom元素上.这个好办: 审查绑定事件的元素(对着它右键->审查元素)在弹出的Elements视图的控制台,右侧点击"Event Listeners&quo

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）

    一.事件 1 加载DOM 复制代码 代码如下: $(document).ready(function(){//...}) DOM加载完毕后执行,在可重复使用上区别于window.onload=function(){//...} $(window).load(function(){//...}) window内所有对象加载完毕后执行,几等同window.onload=function(){//...}.也可针对selector使用此方法 另:$(document).ready(function()

  • 详解JavaScript中的自定义事件编写

    我们可以自定义事件来实现更灵活的开发,事件用好了可以是一件很强大的工具,基于事件的开发有很多优势(后面介绍). 与自定义事件的函数有 Event.CustomEvent 和 dispatchEvent. 直接自定义事件,使用 Event 构造函数: var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { ... }, false); // Disp

随机推荐