Ext组件事件
ext组件事件建立在ext元素事件基础上,也具有事件对象和事件管理机制。事件管理负责事件的添加,删除,启动 ,监听。和元素事件管理不同,组件事件管理机制又来储存事件监听函数。
事件对象
组件事件对象通过Ext.util.Event
实现。
位置(ExtJs3.1 )src\util\core\Observable.js
源码:
EXTUTIL.Event = function(obj, name){
this.name = name; //事件名
this.obj = obj; //作用域
this.listeners = []; //监听函数集合
};
全部方法:
- 对象方法
addListener (fn, scope, options)
createListener (fn, scope, o)
findListener (fn, scope)
isListening (fn, scope)
removeListener (fn, scope)
clearListeners ()
fire ()
- 私有方法(存在Observable.js的作用域)
createTargeted(h, o, scope)
createBuffered(h, o, l, scope)
createSingle(h, e, fn, scope)
createDelayed(h, o, l, scope)
组件的事件机制
组件事件机制采用观察者模式实现 ,观察者一般分两个部分
- 一部分由类库实现(观察者)
- 一部分由开发者实现(被观察者)
类库必须在合适的位置来观察 被观察者是否实现的预定的接口,如果实现即在此处执行。
Ext的事件机制就是这样实现的。但是观察者对象并不是只用来触发事件。更多的时候用来扩展组件。
只要继承Ext.util.Observable 就有事件的功能,组件的根类继承此类
EXTUTIL.Observable = function(){
var me = this, e = me.events;
if(me.listeners){
me.on(me.listeners);
delete me.listeners;
}
me.events = e || {};
};
全部方法:
- addListener(eventName, fn, scope, o) //为事件注册new Ext.util.Event(obj, name)
- removeListener(eventName, fn, scope)
- purgeListeners
- addEvents(o) // 添加事件类型(名)
- hasListener(eventName)
- suspendEvents(queueSuspended)
- resumeEvents
- fireEvent
addEvents、fireEvent属于观察者注册
addListener 为被观察者注册函数
事件拦截思想
源文件src\util\Observable-more.js
该文件 扩展了Observable类添加了beforeMethod、afterMethod、removeMethodListener、relayEvents、enableBubble方法。定义了一个内部函数getMethodEvent
当调用beforeMethod 或 afterMethod 会通过getMethodEvent函数生成一个具有before 和 after集合的事件对象。并分别向其中添加事件监听函数
组件及元素事件结合
组件事件可以分为两类:用来扩展业务功能的事件和相应用户键盘和鼠标的事件。相应键盘和鼠标的事件建立在元素基础之上。
有关组件的详情,在写到Ext组件时再分析。