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


Posted in Javascript onAugust 11, 2010

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

在线演示
Javascript 相关文章推荐
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
vue实现评价星星功能
Jun 30 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
用js解决数字不能换行问题
Aug 10 #Javascript
JavaScript 错误处理与调试经验总结
Aug 10 #Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 #Javascript
javascript中的prototype属性实例分析说明
Aug 09 #Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 #Javascript
jquery下json数组的操作实现代码
Aug 09 #Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 #Javascript
You might like
PHP可变变量学习小结
2015/11/29 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
django的csrf实现过程详解
2019/07/26 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
详解Python3中的 input() 函数
2020/03/18 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
生产厂长岗位职责
2014/02/21 职场文书
社区务虚会发言材料
2014/10/20 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
Python requests用法和django后台处理详解
2022/03/19 Python