ExtJS 4的事件系统
ExtJS使用以Observable混入类为核心的观察者模式，提供了统一的事件发布、监听编程接口，把浏览器的原生事件统一抽象为EventObject。
ExtJS事件分成元素事件和组件事件两类：
- 元素事件：在浏览器事件机制的基础上扩展而来的，匹配不同浏览器行为的差异性，提供统一的编程接口
- 组件事件： 高层次的事件机制，组件事件可能由元素事件触发，也可能与之无关
除非指定监听器为延迟执行，ExtJS的事件监听器都是同步化执行的（即：fireEvent之后立即调用listener函数，而不是由浏览器“异步”的处理）
事件机制是用来处理无法预知何时会发生的动作的机制，比如用户单击网页链接，程序并不知道该动作何时发生，但当其发生之后应该跳转至其他页面或执行某种处理。网页中的每个HTML标签展现时都会生成DOM元素，当用户单击鼠标时，该鼠标事件就会通过操作系统事件机制传递到浏览器，接下来浏览器根据自身事件机制来判断用户单击了哪个元素， 并执行该元素已经注册的事件处理函数，然后判断其是否需要冒泡给父元素进行相关处理。
该混入类为发布事件提供了统一的接口，子类应当具有一个events属性来包含其支持的事件，此外listeners属性则表示已经注册的监听器，Observable并不限制使用于元素或者组件，下面是该混入的简单用法示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Ext.define( 'Employee', { mixins : { observable : 'Ext.util.Observable' }, constructor : function( config ) { //构造该混入 this.mixins.observable.constructor.call( this, config ); //添加支持的事件 this.addEvents( 'fired', 'quit' ); } } ); var xdz = new Employee( { name : employeeName, listeners : { fired : function() { //默认情况下this执行触发事件的对象，即xdz console.log( this.name + " was fired." ); } } } ); |
Observable提供了以下成员：
| 配置项/属性/方法 | 说明 | ||
| {listeners} |
在初始化阶段添加到当前对象的事件监听器列表，形式为：{事件名:事件处理函数}或者其它更复杂的形式，参考addListeners()方法 从ExtJS组件中直接访问元素事件，可以指定组件的某个类型为元素的属性名，例如：
某些组件通过重新封装暴露了一些元素事件，例如DataView的itemClick暴露了节点的click事件 |
||
| hasListeners | 该对象持有了所有具有监听器的事件名称，例如this.hasListeners.click!=undefined则意味着包含click事件监听器 | ||
| isObservable | 用于鸭子类型识别 | ||
| addEvents() | void ( Object/String... eventNames )，指定当前类型可以触发的事件 | ||
| addListener() | void ( String/Object eventName, [Function fn], [Object scope], [Object options] )。该方法的别名是on：
选项可以包括： |
||
| addManagedListener() | void ( Ext.util.Observable/Ext.Element item, Object/String ename, [Function fn], [Object scope], [Object opt] )。该方法的别名是mon。与on类似，但是在当前Observable被销毁时，会自动销毁监听器，防止内存泄漏 | ||
| clearListeners() | 清除包括受管监听器的所有监听器 | ||
| clearManagedListeners() | 清除所有受管监听器 | ||
| enableBubble() | void ( String/String[] eventNames )。允许某些事件冒泡，冒泡的目标通过this.getBubbleTarget()获得。主要在组件中用于把事件冒泡给父容器 | ||
| fireEvent() | Object ( String eventName, Object... args )。发布一个事件，args将被传递给监听器，如果任一监听器返回false，则该函数返回false | ||
| hasListener() | Boolean ( String eventName )。是否具有监听器，返回值指示事件是否需要发布 | ||
| removeListener() | void ( String eventName, Function fn, [Object scope] )。该方法的别名是un。fn必须是传递给addListener的函数的引用 | ||
| removeManagedListener() | void ( Ext.util.Observable/Ext.Element item, Object/String ename, [Function fn], [Object scope] )。该方法的别名是mun，与removeListener类似，但是仅移除受管监听器 | ||
| relayEvents() | void ( Object origin, String[] events, [String prefix] )，转播origin触发的事件，就好像是this触发的一样：
|
||
| resumeEvents() | 恢复事件发布 | ||
| suspendEvents() | void ( Boolean queueSuspended )，暂停事件发布。 如果参数为true，那么事件排队，等待resumeEvents()时一起发布 | ||
| 静态成员 | |||
| capture() | void ( Ext.util.Observable o, Function fn, [Object scope] )。捕获o上触发的事件，传递给fn（参数为eventName+args），如果fn返回false，则事件不会触发 | ||
| observe() | void ( Function c, Object listeners )。在传递的构造器c上设置可观察性，可以用于集中式事件处理：
|
||
| releaseCapture() | void( Ext.util.Observable o )。移除捕获 | ||
就像Ext.Element封装了DOM节点一样，单例EventObject封装了浏览器原生的事件对象，屏蔽了跨浏览器的不一致性，EventObject的简单用法如下：
|
1 2 3 4 5 6 7 8 9 |
function clickHandler( e, t ) { e.preventDefault(); //阻止默认行为 var target = e.getTarget(); //事件源 } //添加元素的事件监听器 var myDiv = Ext.get( "myDiv" ); myDiv.on( "click", clickHandler ); Ext.EventManager.on( "myDiv", 'click', clickHandler ); |
提供了以下成员：
| 配置项/属性/方法 | 说明 | ||
| (Key constants) |
Number，用于表示KeyCode的常量。包括： A-Z, CAPS_LOCK, BACKSPACE, CONTEXT_MENU, CTRL, ALT, SHIFT, DELETE, RETURN, SPACE, UP, DOWN, LEFT, RIGHT, F1-F10, ZERO-NINE, NUM_ZERO-NUM_NINE, |
||
| WHEEL_SCALE | Number, 鼠标中键的Δ变化因子 | ||
| altKey | Boolean, 事件期间ALT键是否被按下 | ||
| ctrlKey | Boolean, 事件期间CTRL键是否被按下 | ||
| shiftKey | Boolean, 事件期间SHIFT键是否被按下 | ||
| correctWheelDelta() | Number ( Number delta )，使用dalta除以WHEEL_SCALE | ||
| getCharCode( ) | Number()，返回事件的Character code | ||
| getKey( ) | Number()，返回事件的Key code | ||
| getPoint( ) | Ext.util.Point()，返回事件发生时鼠标的坐标 | ||
| getRelatedTarget() | HTMLElement ( [String selector], [Number/HTMLElement maxDepth], [Boolean returnEl] ) 。获取相关的目标 | ||
| getTarget() | HTMLElement ( [String selector], [Number/HTMLElement maxDepth], [Boolean returnEl] ) 。获取事件目标 | ||
| getWheelDelta() | Number ( ) 。获取Y方向的滚轮Δ值 | ||
| getWheelDeltas | Object ( ) 。获取X、Y方向的滚轮Δ值，返回{x:m, y: n}形式 | ||
| getXY() | Number[]()。获取事件发生的坐标，类似还有getX()、getY() | ||
| hasModifier() | Boolean ()。判断该事件发生时，是否有ALT、CTRL、SHIFT等控制键被按下 | ||
| injectEvent() | void ( [Ext.Element/HTMLElement target] ) | ||
| isNavKeyPress() | Boolean ()，被按下的是否是导航键 | ||
| isSpecialKey( ) | Boolean ()，被按下的是否是特殊键 | ||
| preventDefault() | 阻止浏览器处理该事件的默认行为 | ||
| stopPropagation() | 停止事件冒泡 | ||
| stopEvent() | 停止事件。preventDefault()并且stopPropagation() | ||
| within() |
Boolean ( String/HTMLElement/Ext.Element el, [Boolean related], [Boolean allowEl] ) : Boolean 判断事件的目标是不是el的子元素，示例：
|
Leave a Reply