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> 