`
demojava
  • 浏览: 548962 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

【转载】jquery 自定义事件

 
阅读更多

以下故事纯属虚构,如有雷同为巧合...

本文主要介绍JQuery框架里面支持的自定义事件模型,通过实例说明什么时候可以利用事件模型进行面向对象的JS编程,以及利用“带命名空间的事件处理函数”来避免unbind时影响别的事件订阅。

知识要点:

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

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

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

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

 

//这个是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://vivasky.com"});

 

//经理B突然有一天去搜狐做了,不再订阅Levin的周结...

B.unRssLevin=function(){
    alert("我要去搜狐做副总裁啦,哈哈");
    Levin.unbind("evt_weeklyReport.fromB");
    return true;
}();

  


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

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

 

分享到:
评论

相关推荐

    【转载】去掉jquery menu plugin 的“No back link”

    这篇博客文章可能是分享如何修改或自定义jQuery菜单插件的代码,以消除这种现象。 在实际的Web开发中,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果。jQuery插件是开发者为了扩展...

    Jquery + Json 无刷新分页

    Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access ...每页显示的记录条数在config里面设置(转载人标注:config里配置只是为了方面,也可在后台设置) 作者:刘巨

    (转载文章)jquery日期显示中文

    jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在这个场景中,我们关注的是如何在前端展示日期,特别是对于中文用户友好的日期格式。 【描述】:虽然JavaScript内置...

    JQuery应用实例学习(强烈推荐)转载.doc

    此外,`.bind()` 和 `.trigger()` 方法分别用于绑定和触发自定义事件。jQuery 还提供了一套丰富的动画效果,如 `.fadeIn()`、`.slideUp()` 和 `.animate()`,使得创建平滑过渡和复杂动画变得简单。 AJAX 交互在 ...

    15天学会JQuery(转载)

    4. **动画效果**: jQuery的`animate()`函数允许创建自定义动画,比如改变元素的宽度、高度、透明度等。同时,`fadeIn()`, `fadeOut()`, `slideToggle()`等预定义动画可快速实现常见效果。 5. **Ajax交互**: jQuery...

    jQuery表单验证 转载

    jQuery FormValidator还支持自定义验证规则。例如,如果我们需要验证密码强度,可以这样做: ```javascript $.formValidator.addRule("passwordStrength", function(value) { var strength = 0; // 检查长度、...

    jquery 分页 为了收藏纯属转载

    自定义样式和事件 该插件允许开发者自定义样式以适应不同的设计需求。例如,可以通过CSS类`pagination`、`page-item`、`active`等修改分页按钮的样式。同时,插件提供了一些内置事件,如`changePage`,可以在用户...

    select自定义

    例如,使用jQuery添加一个点击事件来显示下拉列表: ```javascript $(document).ready(function() { $('.select-custom').on('click', function() { $(this).find('option').show(); }); }); ``` 如果想要实现...

    杨洋疯狂C#第一期 Jquery相关代码

    9. **ch1_18基本事件.html**:进一步深入事件处理,可能包括自定义事件、事件委托等。 10. **ch1_7.html**:可能讲解了jQuery中的Ajax操作,如$.ajax()、$.get()、$.post()等,用于实现异步数据交互。 通过这些实例...

    jquery的经典资料

    - **自定义动画**:也可以通过`.animate()`方法创建自定义动画序列。 ##### 6. 表格排序插件 - **tablesorter插件**:这是一个常用的jQuery插件,可以自动为表格添加排序功能。 - **插件使用**:只需在页面中引入...

    layui-progress+element+jquery+js设计一个动态进度条

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画等功能。在本项目中,jQuery可能被用来操作DOM元素,实现进度条的动态更新,例如通过改变进度条的宽度或填充色来反映进度的变化。 JavaScript...

    [软件][转载]关闭QQ的各种弹窗,支持自定义.

    2. 编写拦截代码,当检测到特定请求或事件时,阻止其执行或返回空响应。 3. 可能需要动态注入代码到QQ进程中,以便实时监控和处理弹窗行为。 4. 对于一些静态的、固定的弹窗,可能需要修改QQ的资源文件,删除或禁用...

    jQuery EasyUI 1.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    (题外话:从本次开始 我新增了jQuery EasyUI的专题页面 大家可以关注我的专题页来及时获取最新的EasyUI资源 专题页地址如下http:http://download.csdn.net/album/detail/343 同时也希望转载的那些朋友能保留我资源...

    暴风影音jQuery焦点图

    8. **自定义插件**:jQuery的可扩展性允许开发人员创建自己的插件。这个"暴风影音jQuery焦点图"可能就是一个定制的jQuery插件,封装了上述的功能。 最后,对于这个实例,开发者需要注意版权问题。"本作品由【站长...

    [转载]常用的三种树形菜单

    这篇【转载】的博客文章“常用的三种树形菜单”探讨了实现这种交互方式的不同技术。尽管没有提供具体的文章内容,我们可以基于这个主题来深入讨论树形菜单的基本概念、实现方式以及相关的编程技术和工具。 1. **...

    图片列表点击放大(转载,备用)

    - **JavaScript库**:如jQuery的`click`事件和`fadeIn`方法,或者更专业的图片库如Fancybox、Lightbox等,它们提供了丰富的自定义选项和动画效果。 - **响应式设计**:对于不同设备和屏幕尺寸,可以使用媒体查询(`...

    query-zTree的基本用法(转载)

    zTree是一款基于jQuery的树形插件,广泛应用于网站的导航、目录展示、数据组织等场景。它以其强大的功能、灵活的配置和友好的API,深受开发者的喜爱。本文将深入探讨zTree的基本用法,帮助你快速上手。 ### 1. ...

    转载:再谈“可输入的下拉框”,完全支持中文输入

    3. JavaScript/jQuery:用于监听用户输入事件,实时过滤下拉选项,并处理自定义输入。 4. AJAX:异步数据加载,当用户输入时,动态地从服务器获取匹配的选项。 5. CSS:美化组件样式,使其符合界面设计要求。 6. ...

    22款不同效果产品图片展示切换

    在这款产品图片展示切换中,jQuery可能被用来监听鼠标滑过事件,触发缩略图图片的切换。例如,使用`mouseenter`和`mouseleave`事件,当用户将鼠标悬停在缩略图上时,大图会显示相应的全尺寸图片。 其次,CSS3是CSS...

Global site tag (gtag.js) - Google Analytics