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>

  在线演示