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 操作select和option常用代码整理
Dec 13 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
js创建数组的简单方法
2016/07/27 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
python字符串常用方法
2018/06/14 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
详解Python IO编程
2020/07/24 Python
Python的collections模块真的很好用
2021/03/01 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
学习决心书范文
2014/03/11 职场文书
经营管理策划方案
2014/05/22 职场文书
模具专业求职信
2014/06/26 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
领导欢迎词范文
2015/01/26 职场文书
离婚协议书格式
2015/01/26 职场文书
中学生逃课检讨书
2015/02/17 职场文书
素质教育学习心得体会
2016/01/19 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers