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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
JQuery实现图片轮播效果
May 08 jQuery
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 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 5.0 Pear安装方法
2006/12/06 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python的argparse库使用详解
2018/10/09 Python
python实现名片管理系统
2018/11/29 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
C和C++经典笔试题附答案解析
2014/08/18 面试题
.NET现在共支持多少种语言
2014/02/26 面试题
计算机专业学生求职信分享
2013/12/15 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
财产公证书格式
2014/04/10 职场文书
学生评语大全
2014/04/18 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2014年优秀党员材料
2014/12/18 职场文书
世界地球日活动总结
2015/02/09 职场文书
2015年药店工作总结
2015/04/20 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python