jQuery最佳實踐：精妙的自定義事件
對于jQuery自定義事件，很多JavaScript開發(fā)者都會有所疑惑：在日常開發(fā)過程中會不會用到呢？而本文將結(jié)合一個開發(fā)案例，其中的一些地方應(yīng)用到了jQuery的自定義事件，而且達(dá)到了很好的效果-精簡代碼的同時充分利用了OO的原則。
51CTO推薦專題： jQuery從入門到精通
問題
一個復(fù)選框X，你如何便捷地觸發(fā)它的click事件的處理邏輯，但是又不改變它當(dāng)前的選中狀態(tài)？
答案
其實沒有什么標(biāo)準(zhǔn)答案，用傳統(tǒng)的方式，寫一個函數(shù)：
- var onClick=function(dom){//復(fù)選框x的Click事件的處理邏輯};
當(dāng)僅僅需要執(zhí)行處理邏輯而不改變復(fù)選框的狀態(tài)時：
- onClick(X);//X引用復(fù)選框
為了響應(yīng)用戶直接點擊復(fù)選框，你還需要為復(fù)選框X添加相應(yīng)的Click處理函數(shù)：
- $(X).click(function(evt){ //執(zhí)行處理邏輯 onClick(this);});
但是，我要說的是，這里可以利用自定義事件處理函數(shù)封裝復(fù)選框Click事件的處理邏輯！然后觸發(fā)該自定義事件。而且個人覺得具有必要性和優(yōu)點：
1，onClick的邏輯是屬于復(fù)選框自身的，沒有必要用一個全局方法來定義并剝離復(fù)選框?qū)ο蟆?/strong>
從面向?qū)ο蟮慕嵌日f，對象由屬性和行為（方法）構(gòu)成，所以onClick的邏輯可以封裝在復(fù)選框的作用域（context）內(nèi)。
2，充分利用匿名函數(shù)，減少全局變量或者函數(shù)的數(shù)量，有利于提高腳本的執(zhí)行效率。
代碼示例
1，首先定義一個變量$x引用緩存我們的復(fù)選框?qū)ο蟆＿@點非常重要但很多js開發(fā)員沒有意識到：每調(diào)用一次jQuery的$方法選中某個元素＝遍歷一次html dom樹。所以要學(xué)會利用JavaScript變量緩存對象。
- var $x=$(X);
2，定義一個自定義事件evtClick，封裝處理邏輯。
- $x.bind("evtClick",function(evt){ //onClick的處理邏輯});
3，當(dāng)要執(zhí)行處理邏輯又不想改變復(fù)選框的選中狀態(tài)時，利用trigger方法觸發(fā)evtClick事件。
- $x.trigger("evtClick");
4，click事件。
- $x.click(function(evt){ $x.trigger("evtClick");});
jQuery觸發(fā)自定義事件并傳參
- $("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();
【編輯推薦】
