JS控件事件
概述:
事件对于控件来说至关重要,控件的消息通信机制使用事件的成本最低,但是对于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 事件冒泡的支持,而我们在控件上实现的事件冒泡机制足够我们实现委托的效果,所以委托的接口我们就不实现了。
控件支持的事件:
在上一节里,我讲了控件的状态和从这些状态推导出来的属性,理论上说,每个控件的状态发生改变都要触发一个事件,推广开说,每个属性值发生改变时,也应该有相应的事件抛出。而每个状态发生改变时又有2个事件要触发,before 和 after,以选中(selected)状态为例,我们会有以下事件:
1. beforeSelectedChange 事件,选中前发生
2. afterSelectedChange 事件,选中后发生
跟选中(selected)属性相关的一个属性,是否可选(selectable)发生改变时,我们也要抛出事件,即
1. beforeSelectableChange 事件
2. afterSelectableChange 事件
以表格为例,如果我们设置某一列可选,那么就应该标示本列可选,在afterSelectableChange 事件发生时,改变列的样式,标示本列可选。至于如何实现属性值改变时,触发相关的2个事件,我们应该有通用的机制,在后面的章节里,讲解JS控件属性时会一一给大家分享。
改变属性即触发事件,可以给我们的控件带来非常大的好处,扩展性、易用性都会有很大提升。
事件代码实现
具体的代码实现和一些帮助方法我写到下面的代码中,不便于在文章中展开,感兴趣的可以看一下,后面的控件库都是基于这些帮助方法和事件对象的。文件里面的其他帮助方法,在其他章节讲解。