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 相关文章推荐
二级域名转向类
Nov 09 Javascript
jquery 模板的应用示例
Nov 12 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
Jquery使用val方法读写value值
May 18 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
用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
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
JavaScript中三种常见的排序方法
2017/02/24 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python argv用法详解
2016/01/08 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python2与Python3的区别实例总结
2019/04/17 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
港湾网络笔试题
2014/04/19 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
个人收入证明范本
2014/01/12 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
医院信息公开实施方案
2014/05/09 职场文书
2014年计生标语
2014/06/23 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
app场景下uniapp的扫码记录
2022/07/23 Java/Android