对于jQuery自定义事件,很多JavaScript开发者都会有所疑惑:在日常开发过程中会不会用到呢?而本文将结合一个开发案例,其中的一些地方应用到了jQuery的自定义事件,而且达到了很好的效果-精简代码的同时充分利用了OO的原则。

51CTO推荐专题: jQuery从入门到精通

问题

一个复选框X,你如何便捷地触发它的click事件的处理逻辑,但是又不改变它当前的选中状态?

答案

其实没有什么标准答案,用传统的方式,写一个函数:


  1. var onClick=function(dom){//复选框x的Click事件的处理逻辑};

当仅仅需要执行处理逻辑而不改变复选框的状态时:


  1. onClick(X);//X引用复选框

为了响应用户直接点击复选框,你还需要为复选框X添加相应的Click处理函数:


  1. $(X).click(function(evt){  //执行处理逻辑  onClick(this);});

但是,我要说的是,这里可以利用自定义事件处理函数封装复选框Click事件的处理逻辑!然后触发该自定义事件。而且个人觉得具有必要性和优点:

1,onClick的逻辑是属于复选框自身的,没有必要用一个全局方法来定义并剥离复选框对象。

从面向对象的角度说,对象由属性和行为(方法)构成,所以onClick的逻辑可以封装在复选框的作用域(context)内。

2,充分利用匿名函数,减少全局变量或者函数的数量,有利于提高脚本的执行效率。

代码示例

1,首先定义一个变量$x引用缓存我们的复选框对象。这点非常重要但很多js开发员没有意识到:每调用一次jQuery的$方法选中某个元素=遍历一次html dom树。所以要学会利用JavaScript变量缓存对象。


  1. var $x=$(X);

2,定义一个自定义事件evtClick,封装处理逻辑。


  1. $x.bind("evtClick",function(evt){    //onClick的处理逻辑});

3,当要执行处理逻辑又不想改变复选框的选中状态时,利用trigger方法触发evtClick事件。


  1. $x.trigger("evtClick");

4,click事件。


  1. $x.click(function(evt){  $x.trigger("evtClick");});

jQuery触发自定义事件并传参


  1. $("input").bind("myevent",function(event,msg1,msg2){
  2. alert("msg1:"+msg1);
  3. })
  4. $("input").click(function(){
  5. $("input").trigger("myevent",["avalue","bvalue"])
  6. });
  7. $("input").bind("myevent",function(event,msg1,msg2){
  8. alert("msg1:"+msg1);
  9. })
  10. $("input").click(function(){
  11. $("input").trigger("myevent",["avalue","bvalue"])
  12. });

自定义事件:


  1. var Common = {};
  2. Common.Dialog = function(config){};
  3. Common.Dialog.prototype = {
  4. height:310,
  5. init: function(){
  6. jQuery.event.trigger("submit");
  7. }
  8. };
  9. var dlg = new Common.Dialog({height:200});
  10. $(dlg).bind("submit",function(){alert("submit event")});
  11. dlg.init();

Jquery精妙的自定义事件的更多相关文章

  1. jQuery 自定义事件的学习笔记

    jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件  代码如下 复制代码 ...

  2. jquery的自定义事件通过on绑定trigger触发

    jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字 ...

  3. javascript和jquey的自定义事件小结

    “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...

  4. 跟着《beginning jquery》学写slider插件并借助自定义事件改进它

    <beginning jquery>是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件.实现 ...

  5. jQuery的自定义事件——滚轮

    这个案例类似于在地图上滚动滚轮,能缩小或者放大地图,分别用zoomIn和zoomOut来命名. 代码如下: //JS部分:<script src="jquery-1.10.2.min. ...

  6. jQuery 的自定义事件

    jQuery  中,想要自动触发自定义事件,必须满足2个条件: 1.事件必须是通过on 来绑定的. 2.事件必须是通过trigger / triggerHandler 来触发. 格式如下: $(fun ...

  7. jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件

    很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...

  8. jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  9. jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化

    jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oni ...

随机推荐

  1. VxWorks下USB驱动总结1

    1.USB设备 物理特征:4条电缆,电源线.地线.数据线.脉冲线; 速 度:低速1.5Mbps,全速12Mbps,高速480Mbps; 规范版本:1998年USB1.1,2000年USB2.0; 连 ...

  2. zTree实现更新根节点中第i个节点的名称

    zTree实现更新根节点中第i个节点的名称 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树 ...

  3. python爬虫--爬取某网站电影下载地址

    前言:因为自己还是python世界的一名小学生,还有很多路要走,所以本文以目的为向导,达到目的即可,对于那些我自己都没弄懂的原理,不做去做过多解释,以免误人子弟,大家可以网上搜索. 友情提示:本代码用 ...

  4. babel-runtime和babel-polyfill两者区别优缺点

    先说两种方式的原理: babel-polyfill 使用场景 Babel 默认只转换新的 JavaScript 语法,而不转换新的 API.例如,Iterator.Generator.Set.Maps ...

  5. 《用TCP/IP进行网络互连》读书笔记

    <用TCP/IP进行网络互连>读书笔记   第2章,基本网络技术 网络通信分类:基于连接的通信(connection-oriented),基于非连接的通信(connectionless) ...

  6. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  7. Postgresql与Oralce常用用法区别总结

    日期操作 1. 操作当前日期和时间 oracle Select SYSDATE FROM dual; PostgreSQL Select CURRENT_DATE; Select NOW();返回日期 ...

  8. 使用Spring-boot小结

    Spring-boot的特点是,通过注入的方式生成FsShell对象,来操作HDFS,其底层封装了HDFS的的shell命令 1. 添加Spring-boot依赖 pom.xml文件 <!--添 ...

  9. 【BZOJ4552】排序(线段树,二分答案)

    [BZOJ4552]排序(线段树,二分答案) 题面 BZOJ 题解 好神的题啊 直接排序我们做不到 怎么维护? 考虑一下,如果我们随便假设一个答案 怎么检验它是否成立? 把这个数设成\(1\),其他的 ...

  10. [BZOJ4195] [NOI2015] 程序自动分析 (并查集)

    Description 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3,…代表程序中出现的变量,给定n个形如xi=xj或x ...