JS 控件事件

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控件属性时会一一给大家分享。

改变属性即触发事件,可以给我们的控件带来非常大的好处,扩展性、易用性都会有很大提升。 

事件代码实现

具体的代码实现和一些帮助方法我写到下面的代码中,不便于在文章中展开,感兴趣的可以看一下,后面的控件库都是基于这些帮助方法和事件对象的。文件里面的其他帮助方法,在其他章节讲解。

 工具类及事件

原文地址:https://www.cnblogs.com/zaohe/p/2744977.html