恰好偶最近负责的一个可视化编辑器的开发，其中有些地方便应用了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> 在线演示

　　推荐阅读

　　jquery autocomplete自动完成插件的的使用方法

首先下载所需文件，jquery.autocomplete.js和jquery.autocomplete.css。 由于该控件获得数据可以从数组和URL两种方式获取，所以写了两个简单的小例子试验一下。 前台代码如下： 复制代码 代码如下: <%@ Page Langu>>>详细阅读

本文标题：JQuery最佳实践之精妙的自定义事件

地址：http://www.17bianji.com/kaifa2/JS/25889.html

 1/2    1