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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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
如何给phpadmin一个保护
2006/10/09 PHP
桌面中心(一)创建数据库
2006/10/09 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
jQuery插件开发全解析
2012/10/10 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
python计算圆周率pi的方法
2015/07/11 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python将txt文件读取为字典的示例
2018/12/22 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Django实现基于类的分页功能
2019/10/31 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
优秀高中学生评语
2014/12/30 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android