Jquery精妙的自定义事件

对于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();