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

知识要点：

1，自定义事件custom events及事件的订阅

2，trigger、bind、unbind方法的使用

3，带命名空间的自定义事件

将下面内容粘贴至txt文档后再直接粘贴至firebug的控制台，运行看看。


代码如下:

/*
JQuery自定义事件的应用-Javascript OO
有一帅哥叫Levin，在某公司前端设计部工作，他的主管是大帅哥A，经理是大美眉B。
领导们希望可以抽空瞄瞄这家伙每周的工作情况，于是。。。
Levin每周一要用google doc写一份关于上周工作的总结，并被要求写完后要MSN通知A和B。。。
Levin非常乐意做周总结，但是他提出了一个建议：
既然我用google doc写好了，你们喜欢看便用google reader订阅我的文档更新吧，我不喜欢用微软的MSN。。。

这丫...A和B头顶乌鸦飘了几秒，但欣然答应。
*/

//这个是Levin同学


代码如下:

var Levin={name:"Levin"};
Levin=$(Levin);

//每周要写周总结


代码如下:

Levin.bind("evt_weeklyReport",function(evt){
alert(this.name+"高呼:Yeah!周总结已经写好啦.");
});

//主管A


代码如下:

var A={name:"帅哥A"};

//他要订阅Levin的周总结


代码如下:

A.rssLevin=function(){
Levin.bind("evt_weeklyReport.fromA",function(evt,data){
alert(A.name+":嗯，不错，Levin还是挺积极的嘛！");
})
};
A.rssLevin();

//经理B


代码如下:

var B={name:"美眉B"};

//她也订阅Levin的周总结


代码如下:

B.rssLevin=function(){
Levin.bind("evt_weeklyReport.fromB",function(evt,data){
alert(B.name+":周总结呆会看，先看看他说的那个网站");
window.location=evt.site;
})
};
B.rssLevin();

//每次Levin同学写好周总结后便会用google doc发布一下


代码如下:

Levin.trigger({type:"evt_weeklyReport",site:"http://jb51.net"});

//经理B突然有一天去搜狐做了，不再订阅Levin的周结...
[code]
B.unRssLevin=function(){
alert("我要去搜狐做副总裁啦，哈哈");
Levin.unbind("evt_weeklyReport.fromB");
return true;
}();
[html]

//尽管B跳槽了，周总结还是要按时发布的。。。


代码如下:

Levin.trigger({type:"evt_weeklyReport",site:"http://jb51.net"});

赞 (0)

相关推荐

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

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

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

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

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

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

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

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

  • jQuery常用事件方法mouseenter+mouseleave+hover

    jQuery常用事件方法mouseenter+mouseleave+hover

    jQuery常用事件方法: jQuery事件方法与原生Js事件方法名称类似,不需要写on,通过jQuery对象打点调用,括号内参数是事件函数 mouseenter()方法:鼠标进入一个元素触发的事件 mouseleave()方法:鼠标离开一个元素触发的事件 注意:mouseenter和mouseleave没有事件冒泡,在使用时替换mouseover和mouseout更加合适 下面是代码对比: <div class="parent">    <div class=&qu

  • jQuery最佳实践完整篇

    jQuery最佳实践完整篇

    上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT<提高jQuery性能的诀窍>(jQuery Proven Performance Tips And Tricks).他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值. ============

  • jQuery自定义元素右键点击事件(实现案例)

    大多数情况下我们使用左键来进行页面交互,而右键大部分对于开发者来说是审查元素的,有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性,常见的有漫画左键前进.右键后退. 第一步我们要屏蔽浏览器默认的右键点击行为,即阻止弹出框. 首先要将阻止弹出函数绑定到目标元素上: //阻止浏览器默认右键点击事件 $("div").bind("contextmenu", function(){ return false; }) 如此一来,div元素的右击事件就被屏蔽了,而浏览器其

随机推荐