JS 控件事件小结


Posted in Javascript onOctober 31, 2012

概述:

事件对于控件来说至关重要,控件的消息通信机制使用事件的成本最低,但是对于JS控件来说有一些麻烦需要解决,JS类本身不支持事件,DOM模型支持的事件仅适应于浏览器的DOM节点。所以创建一套事件是我们写控件之前要做的。

事件机制

对于事件的机制我不想多说,各种语言中对事件的描述都很具体,都是观察者模式的一种实现,我们可以从中抽取出事件必须的接口(由于控件库是基于jQuery 所以接口跟jquery保持一致):

1.on: 绑定事件

2.off: 删除事件

3.fire: 触发事件

4.addTarget : 添加冒泡的对象

5.publish: 允许事件冒泡

jQuery 中的事件

jQuery 中的事件功能缺失很丰富,但是必须是jQuery对象才支持,我们自己定义的控件类无法直接使用jQuery的事件,事件的上下文也有问题,所以我们需要自己封装控件的事件。

jQuery 中的 Callbacks 是 1.7中添加的用于回调的机制,使用起来很方便,但是问题也是指定上下文需要在触发时指定,我们可以将其封装到我们自己的事件类中。

绑定事件:

函数原型: function on(eventType,callback) 参数:
1.eventType : 事件类型
2.callback : 回调函数
3.scope : 回调函数的上下文,这个变量在真正的控件绑定过程中使用的非常少,而且都有替代方案,所以为了简单起见,scope变量在此函数和下面的所有函数中就引入了。

上面回调函数的上下文是绑定事件的控件本身

删除绑定:
函数原型 : function off(eventType,callback) 参数同上:

1.eventType : 事件类型
2.callback : 回调函数,此变量省略时,删除这个事件类型的所有绑定函数。
在真正的控件开发和使用过程中,删除事件比绑定事件要麻烦的多,删除事件时,你需要有绑定事件时函数的引用,如果需要频繁删除添加同一个事件时请考虑使用delegate

触发事件
函数原型: fire(eventType) :

1. eventType : 事件类型,绑定到对象上的此类型的函数执行。

这里有2点需要注意:

1.触发事件的方式,我们这里使用 ‘stopOnFalse'的方式,也就是绑定在同一个事件类型下的函数顺序执行,如果有一个返回值为false,那么下面的函数终止执行。其他触发事件的方式参考 jquery 的 Callbacks 。

2.事件的是否冒泡执行,也就是说,如果一个控件有多个子控件,那么子控件触发点击事件时可以冒泡到父类控件,我们只需要监听父类的冒泡事件即可

事件冒泡

函数原型: function(eventType,bubble) :

1.eventType : 事件类型
2.bubble : 是否冒泡

此函数与 function addTarget(control) 相匹配使用。

addTarget 添加事件冒泡到的对象上,控件实现中,默认指定控件的父控件作为其冒泡的对象。

上面触发事件中讲到的,允许控件事件冒泡有很多好处:

1. 事件绑定后,子控件的添加删除不受影响

2. 事件使用更加方便,不需要去了解控件的内部

跟事件冒泡对应的是委托(delegate和 undelegate),委托依赖于事件冒泡,DOM的事件机制和jQuery都支持委托,这是因为浏览器本身对DOM 事件冒泡的支持,而我们在控件上实现的事件冒泡机制足够我们实现委托的效果,所以委托的接口我们就不实现了。

事件代码实现

具体的代码实现和一些帮助方法我写到下面的代码中,不便于在文章中展开,感兴趣的可以看一下,后面的控件库都是基于这些帮助方法和事件对象的。文件里面的其他帮助方法,在其他章节讲解。

Javascript 相关文章推荐
关于jQuery的inArray 方法介绍
Oct 08 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
jstree的简单实例
Dec 01 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
js canvas实现星空连线背景特效
Nov 01 Javascript
微信小程序实现弹框效果
May 26 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 #Javascript
fancybox modal的完美解决(右上的X)
Oct 30 #Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 #Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 #Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 #Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 #Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 #Javascript
You might like
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
PHP 高手之路(三)
2006/10/09 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
win7安装python生成随机数代码分享
2013/12/27 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python流程控制 if else实现解析
2019/09/02 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
中科软笔试题和面试题
2014/10/07 面试题
运动会广播稿400字
2014/01/25 职场文书
大学生求职信
2014/06/17 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
2015年女生节活动总结
2015/02/27 职场文书
学校隐患排查制度
2015/08/05 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
Python代码实现双链表
2022/05/25 Python