JQuery最佳實務之精妙的自訂事件

恰好偶最近負責的一個可視化編輯器的開發，其中有些地方便應用了JQuery的自訂事件，而且達到了很好的效果-精簡代碼的同時充分利用了OO的原則。

本文以我實際應用開發過程中遇到的一個例子進一步說明“什麼時候用JQuery的自訂事件以及怎麼用”，希望可以拋磚引玉，同時權且當是回複同學們的郵件了。

Demo-Ingenious JQuery custom event
JQuery最佳實務-精妙的自訂事件
問題：一個複選框X，你如何便捷地觸發它的click事件的處理邏輯，但是又不改變它當前的選中狀態？

答案:用自訂事件處理函數封裝複選框click事件的處理邏輯！然後觸發該自訂事件。

以下應用情境你曾經遇到過嗎？
需求：某個容器A，使用者可以設定它的4條邊框的有無以及邊框色？“邊框的有無”和“顏色的變化”需要聯動，
就是說改變邊框的時候擷取當前設定的顏色，改變顏色的時候擷取當前設定的邊框，並及時反映到容器A上。

註：本例子邊框顏色統一設定,分別設定的例子大家可以去寫下～
核心代碼: 複製代碼 代碼如下:<div id="demo">
<div class="acts">
<label for="txtCpk"></label>邊框設定：<input type="text" size="10" id="txtCpk" name="color"/>
<input type="checkbox" name="bd" value="top"/><span>上</span>
<input type="checkbox" name="bd" value="right"/><span>右</span>
<input type="checkbox" name="bd" value="bottom"/><span>下</span>
<input type="checkbox" name="bd" value="left"/><span>左</span>
</div>
<textarea id="A" cols="100" rows="29"></textarea>
</div>

</body>
<script id="js" type="text/javascript">
//<![CDATA[
//目標容器A
var $a=$("#A");
//拾色器
var $txtColor=$("#txtCpk").ColorPicker({
onChange:function(hsb,hex,rgb){
$txtColor.val("#"+hex).css("backgroundColor","#"+hex);
//聯動邊框-觸發自訂事件"evtClick"，避免改變複選框的狀態
//這裡可不能直接用$bd.trigger("click")噢;
//$bd.trigger("click");
$bd.trigger("evtClick");
}
});
//邊框及自訂事件的應用
var $bd=$("#demo input[type='checkbox']").bind("evtClick",function(evt){
var c=this.checked?"2px solid "+$txtColor.val():"none";
$a.css("border-"+this.value,c);
}).click(function(evt){
$(this).trigger("evtClick");
});

//show the js
$(document).ready(function(){
$a.val($("#js").html());
});

//]]>
</script>

線上示範