jQuery最佳实践:精妙的自定义事件

开发 开发工具
本文以作者实际应用开发过程中遇到的一个例子说明“什么时候用jQuery的自定义事件以及怎么用”,希望可以抛砖引玉,对广大JavaScript开发者有所帮助。

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

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

问题

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

答案

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

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

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

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

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

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

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

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

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

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

代码示例

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

  1. var $x=$(X); 
  2.  

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

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

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

 

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

4,click事件。

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

jQuery触发自定义事件并传参

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

自定义事件:

  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.     
  10.     
  11. var dlg = new Common.Dialog({height:200});     
  12.         $(dlg).bind("submit",function(){alert("submit event")});     
  13.         dlg.init();  

 

【编辑推荐】

  1. 不只是口号 jQuery的设计艺术
  2. jQuery四大天王:核心函数详解
  3. jQuery中10个强大的遍历函数
  4. 抛砖引玉 自定义jQuery扩展接口
  5. 即刻提升jQuery性能的十个技巧
责任编辑:王晓东 来源: 博客园
相关推荐

2017-05-19 10:03:31

AndroidBaseAdapter实践

2017-05-18 12:36:16

android万能适配器列表视图

2015-06-24 10:07:34

Java编码最佳实践

2009-08-04 09:56:46

C#事件处理自定义事件

2022-05-07 10:22:32

JavaScript自定义前端

2023-12-21 09:00:21

函数React 组件useEffect

2009-08-04 12:56:51

C#自定义事件

2011-08-18 11:05:21

jQuery

2009-09-03 15:46:57

C#自定义事件

2009-08-04 13:53:58

C#委托类C#事件

2010-08-13 11:34:54

Flex自定义事件

2009-08-04 13:31:35

C#自定义事件

2021-08-11 14:29:20

鸿蒙HarmonyOS应用

2009-08-04 12:40:34

c#自定义事件

2021-02-18 08:19:21

Vue自定义Vue 3.0

2012-05-25 12:57:31

Windows Pho

2012-11-19 11:07:42

IBMdw

2015-02-12 15:33:43

微信SDK

2023-06-28 08:05:46

场景vue3自定义

2010-07-01 09:38:31

jQuery
点赞
收藏

51CTO技术栈公众号