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 相关文章推荐
js TextArea的选中区域处理
Dec 28 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
ztree实现权限横向显示功能
May 20 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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
PHP生成静态页
2006/11/25 PHP
php中变量及部分适用方法
2008/03/27 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
python dataframe NaN处理方式
2019/12/26 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
Python 代码调试技巧示例代码
2020/08/11 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
三年级数学教学反思
2014/01/31 职场文书
工程项目建议书范文
2014/03/12 职场文书
禁烟标语大全
2014/06/11 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
城南旧事电影观后感
2015/06/16 职场文书
导游词之江南周庄
2019/12/06 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
python常见的占位符总结及用法
2021/07/02 Python
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技