對于jQuery自定義事件，很多JavaScript開發者都會有所疑惑：在日常開發過程中會不會用到呢？而本文將結合一個開發案例，其中的一些地方應用到了jQuery的自定義事件，而且達到了很好的效果-精簡代碼的同時充分利用了OO的原則。

51CTO推薦專題： jQuery從入門到精通

問題

一個復選框X，你如何便捷地觸發它的click事件的處理邏輯，但是又不改變它當前的選中狀態？

答案

其實沒有什么標準答案，用傳統的方式，寫一個函數：

var onClick=function(dom){//復選框x的Click事件的處理邏輯}; 
 

當僅僅需要執行處理邏輯而不改變復選框的狀態時：

onClick(X);//X引用復選框 
 

為了響應用戶直接點擊復選框，你還需要為復選框X添加相應的Click處理函數：

$(X).click(function(evt){  //執行處理邏輯  onClick(this);});
 

但是，我要說的是，這里可以利用自定義事件處理函數封裝復選框Click事件的處理邏輯！然后觸發該自定義事件。而且個人覺得具有必要性和優點：

1，onClick的邏輯是屬于復選框自身的，沒有必要用一個全局方法來定義并剝離復選框對象。

從面向對象的角度說，對象由屬性和行為（方法）構成，所以onClick的邏輯可以封裝在復選框的作用域（context）內。

2，充分利用匿名函數，減少全局變量或者函數的數量，有利于提高腳本的執行效率。

代碼示例

1，首先定義一個變量$x引用緩存我們的復選框對象。這點非常重要但很多js開發員沒有意識到：每調用一次jQuery的$方法選中某個元素＝遍歷一次html dom樹。所以要學會利用JavaScript變量緩存對象。

var $x=$(X); 
 

2，定義一個自定義事件evtClick，封裝處理邏輯。

$x.bind("evtClick",function(evt){    //onClick的處理邏輯}); 
 

3，當要執行處理邏輯又不想改變復選框的選中狀態時，利用trigger方法觸發evtClick事件。

$x.trigger("evtClick"); 
 

4，click事件。

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

jQuery觸發自定義事件并傳參

$("input").bind("myevent",function(event,msg1,msg2){     
            alert("msg1:"+msg1);     
        })     
    
    
        $("input").click(function(){     
                $("input").trigger("myevent",["avalue","bvalue"])     
            });    
 
$("input").bind("myevent",function(event,msg1,msg2){  
   alert("msg1:"+msg1);  
  })  
 
 
  $("input").click(function(){  
    $("input").trigger("myevent",["avalue","bvalue"])  
   });    
 

自定義事件：

var Common = {};         
    Common.Dialog = function(config){};     
    Common.Dialog.prototype = {     
        height:310,     
        init: function(){     
            jQuery.event.trigger("submit");     
        }     
    };     
    
    
var dlg = new Common.Dialog({height:200});     
        $(dlg).bind("submit",function(){alert("submit event")});     
        dlg.init();  

【編輯推薦】

1. 不只是口號 jQuery的設計藝術
2. jQuery四大天王：核心函數詳解
3. jQuery中10個強大的遍歷函數
4. 拋磚引玉 自定義jQuery擴展接口
5. 即刻提升jQuery性能的十個技巧