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 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
js事件触发操作实例分析
Jun 21 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 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
第二节--PHP5 的对象模型
2006/11/16 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
如何用php获取文件名后缀
2013/06/09 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
QML实现钟表效果
2020/06/02 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
python 解决函数返回return的问题
2020/12/05 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
迟到检讨书400字
2014/01/13 职场文书
2014年化验室工作总结
2014/11/21 职场文书
2014年派出所工作总结
2014/11/21 职场文书
中学生自我评价范文
2015/03/03 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript
python区块链持久化和命令行接口实现简版
2022/05/25 Python
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技