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