JQuery最佳实践-精妙的自定义事件

绪

上次发了文，

JQuery最佳实践-JQuery自定义事件的应用

关于JQuery自定义事件，不少同学曾发邮件问我究竟日常JS应用中会不会用到，以及具体例子云云。。。

恰好偶最近负责的一个可视化编辑器的开发，其中有些地方便应用了JQuery的自定义事件，而且达到了很好的效果-精简代码的同时充分利用了OO的原则。

本文以我实际应用开发过程中遇到的一个例子进一步说明“什么时候用JQuery的自定义事件以及怎么用”，希望可以抛砖引玉，同时权且当是回复同学们的邮件了。

 

 

/*
补充说明下：这篇文章仅说明自定义事件的一个较为特殊的用处（不代表自定义事件的典型应用）：
“伪装原生的dom事件，以便达到不触发原生的事件而执行了原生事件的处理逻辑”。
至于实际是否可取，我已经向jquery社区投递email问那里JS大牛的看法，有结果后我会在这里回复下大家。
*/

 

 

问题

一个复选框X，你如何便捷地触发它的click事件的处理逻辑，但是又不改变它当前的选中状态？

答案

其实没有什么标准答案，用传统的方式，写一个函数

 

var onClick=function(dom){
//复选框x的click事件的处理逻辑
};

 

 

当仅仅需要执行处理逻辑而不改变复选框的状态时，

 

onClick(X);//X引用复选框

为了响应用户直接点击复选框，你还需要为复选框X添加相应的click处理函数，

 

 

$(X).click(function(evt){
  //执行处理逻辑
  onClick(this);
});

 

 

但是，我要说的是，这里可以利用自定义事件处理函数封装复选框click事件的处理逻辑！然后触发该自定义事件。而且个人觉得具有必要性和优点：

1，onClick的逻辑是属于复选框自身的，没有必要用一个全局方法来定义并剥离复选框对象

从面向对象的角度说，对象由属性和行为（方法）构成，所以onClick的逻辑可以封装在复选框的作用域（context）内。

2，充分利用匿名函数，减少全局变量或者函数的数量，有利于提高脚本的执行效率

....

代码示例

1，首先定义一个变量$x引用缓存我们的复选框对象。这点非常重要但很多js开发员没有意识到：每调用一次jquery的$方法选中某个元素＝遍历一次html dom树。所以要学会利用js变量缓存对象～

var $x=$(X);

2，定义一个自定义事件evtClick，封装处理逻辑

$x.bind("evtClick",function(evt){
    //onClick的处理逻辑
});

3，当要执行处理逻辑又不想改变复选框的选中状态时，利用trigger方法触发evtClick事件

$x.trigger("evtClick");

4，click事件

 

$x.click(function(evt){
  $x.trigger("evtClick");
});

 

 

Demo!

以下应用场景你曾经遇到过么？

需求：某个容器A，用户可以设置它的4条边框的有无以及边框色？“边框的有无”和“颜色的变化”需要联动，
就是说改变边框的时候获取当前设定的颜色，改变颜色的时候获取当前设定的边框，并及时反映到容器A上。

注：本例子边框颜色统一设置,分别设置的例子大家可以去写下～

示例请点击上面链接，同时欢迎大家光顾我的博客－漫波网络电台，一个脱离开发工作的音乐分享世界。