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 EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
js 小数取整的函数
2010/05/10 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
python 8种必备的gui库
2020/08/27 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
Django中使用Celery的方法步骤
2020/12/07 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
车祸赔偿收入证明
2014/01/09 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
学校招生宣传广告词
2014/03/19 职场文书
联谊会主持词
2014/03/26 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
在校学生证明格式
2015/06/24 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python