快捷導(dǎo)航

JQuery最佳實(shí)踐之精妙的自定義事件

更新時(shí)間：2010年08月11日 21:59:46 作者：

關(guān)于JQuery自定義事件，不少同學(xué)曾發(fā)郵件問(wèn)我究竟日常JS應(yīng)用中會(huì)不會(huì)用到，以及具體例子云云。。。

恰好偶最近負(fù)責(zé)的一個(gè)可視化編輯器的開(kāi)發(fā)，其中有些地方便應(yīng)用了JQuery的自定義事件，而且達(dá)到了很好的效果-精簡(jiǎn)代碼的同時(shí)充分利用了OO的原則。

本文以我實(shí)際應(yīng)用開(kāi)發(fā)過(guò)程中遇到的一個(gè)例子進(jìn)一步說(shuō)明“什么時(shí)候用JQuery的自定義事件以及怎么用”，希望可以拋磚引玉，同時(shí)權(quán)且當(dāng)是回復(fù)同學(xué)們的郵件了。

Demo-Ingenious JQuery custom event
JQuery最佳實(shí)踐-精妙的自定義事件
問(wèn)題：一個(gè)復(fù)選框X，你如何便捷地觸發(fā)它的click事件的處理邏輯，但是又不改變它當(dāng)前的選中狀態(tài)？

答案:用自定義事件處理函數(shù)封裝復(fù)選框click事件的處理邏輯！然后觸發(fā)該自定義事件。

以下應(yīng)用場(chǎng)景你曾經(jīng)遇到過(guò)么？
需求：某個(gè)容器A，用戶可以設(shè)置它的4條邊框的有無(wú)以及邊框色？“邊框的有無(wú)”和“顏色的變化”需要聯(lián)動(dòng)，
就是說(shuō)改變邊框的時(shí)候獲取當(dāng)前設(shè)定的顏色，改變顏色的時(shí)候獲取當(dāng)前設(shè)定的邊框，并及時(shí)反映到容器A上。

注：本例子邊框顏色統(tǒng)一設(shè)置,分別設(shè)置的例子大家可以去寫(xiě)下～
核心代碼:

復(fù)制代碼代碼如下:

 
<div id="demo"> 
<div class="acts"> 
<label for="txtCpk"></label>邊框設(shè)置：<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[ 
//目標(biāo)容器A 
var $a=$("#A"); 
//拾色器 
var $txtColor=$("#txtCpk").ColorPicker({ 
onChange:function(hsb,hex,rgb){ 
$txtColor.val("#"+hex).css("backgroundColor","#"+hex); 
//聯(lián)動(dòng)邊框-觸發(fā)自定義事件"evtClick"，避免改變復(fù)選框的狀態(tài) 
//這里可不能直接用$bd.trigger("click")噢; 
//$bd.trigger("click"); 
$bd.trigger("evtClick"); 
} 
}); 
//邊框及自定義事件的應(yīng)用 
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> 