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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 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
php中截取中文字符串的代码小结
2011/07/17 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
php经典趣味算法实例代码
2020/01/21 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python 3中print函数的使用方法总结
2017/08/08 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
Django框架封装外部函数示例
2019/05/28 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
python raise的基本使用
2020/09/10 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
中专自荐信
2013/10/13 职场文书
库房主管岗位职责
2013/12/31 职场文书
社区母亲节活动方案
2014/03/05 职场文书
听课评语大全
2014/04/30 职场文书
冬季安全检查方案
2014/05/23 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
入党函调证明材料
2015/06/19 职场文书
公开致歉信
2019/06/24 职场文书