EXT的事件和类，自定义事件
2012-06-09 07:41 774 0
事件模型在Ext应用中有着尤为重要的作用。Ext中的事件模型分为两种类型：自定义事件和浏览器事件。
自定义事件：
Ext中遵循一种树状的事件模型，所有继承自Ext.util.Observable类的控件都可以支持事件。可以为这些继承Ext.util.Observable的对象定义一些事件，然后为这些事件配置监听器，当某个事件触发时，会自动的调用相应的监听器，这些就是Ext的事件模型。
下面通过继承Ext.util.Observable来实现一个支持事件的对象，显示过程代码如下：
Person 类：
Person =function(name){
this.name=name;
this.addEvents("walk","eat","sleep");
}
Ext.extend(Person,Ext.util.Observable,{
info:function(event){
return: this.name+'is'+'event'+'ing.';
}
});
以上代码实现了一个名为Person的对象，他有一个属性name，初始化时，调用addEvent函数定义了三个事件，walk，eat，sleep，然后使用Ext.extend()让Person继承了Ext.util.Observable的所有属性。此外，还加上了函数info()然他返回Person的信息。
接下来该怎么做呢？
我们在HTML中创建一个Person的实例，然后为它的事件配置好监听器，代码如下：
为Person添加事件监听器：
var person =new Person('Lingo');
person.on('walk',function(){
Ext.Msg.alert('event',person.name+"在走啊走啊。");
});
person.on('eat',function(breakfast,lunch,supper){
Ext.Msg.alert('event',person.name+"要吃"+breakfast+"，"+lunch+"和"+supper+"。");
});
person.on('sleep',function(time){
Ext.Msg.alert('event',person.name+"从"+time.fromat("H")+"开始睡觉啦。");
});
这里的on()是addEvent()的简写形式，功能完全一样。第一个参数传递事件名称，第二个参数是事件发生时执行的函数，为简单期间，我们在这里写生alert()的形式。
现在准备工作已经都就绪，在这些事件被触发时就可以看到效果了，可是怎么触发呢？为了便于控制，我们设置3个按钮，在按钮按下时触发相应的事件。
触发person的事件：
Ext.get('walk').on('click',function(){
person.fireEvent('walk');
});
Ext.get('eat').on('click',function(){
person.fireEvent('eat','早餐','中餐','晚餐');
});
Ext.get('sleep').on('click',function(){
person.fireEvent('sleep',new Date());
});
接着调用fireEvent就会触发事件，传入一个事件名称作为参数，该事件对应的监听函数就会执行。
下面要讲述的是只有动态语言才有的特性，如果想给监听方法传递参数，直接把参数写到fireEvent()里面就行了，不用管参数数量，也不用管参数类型（字符串，数字，日期，数组等）。不过，需要确保监听函数可以处理你传过去的参数，如果监听函数需要某个参数，触发事件时却忘了传递过去，这时就会出错。这种因为动态语言的特性而导致的非直观错误非常难以查找。
正如on是addListener的简写，removeListener的简写是un。你可以用它删除某个事件对应的监听函数，具体的操作代码如下：
var function(){
//too
}
person.on('walk',fn);
person.un('walk',fn);
还有一个purgeListener()函数，一旦调用这个函数，所有的监听器都删掉了，请注意，是所有的监听器，一旦调用这个函数，所有的事件
都不起作用了。因此，一定要慎用。
**浏览器事件：
** 浏览器事件即传统意义上的鼠标单击、移动等事件，是由浏览器根据用户的动作触发的，与页面元素紧密相关。EXT使用Ext．EventManager、Ext．EventObject和Ext．lib．Event对原生浏览器事件进行了封装，最后展现在我们面前的就是一套统一的跨浏览器的通用事件接口。
也许有的读者会问，HTML元素本身已经支持事件，为什么还要再重新设计一套事件机制？实际上，基本上所有的JavaScript框架都会实现自己的事件机制。原因很多，但是有一点很重要：
HTML元素对事件的处理是通过简单的单一绑定实现的。也就是说，如果不进行任何封装，事件只能绑定到一个事件处理句柄，如下面的代码所示。
var e=document.getElementByld('tesc')
e.onclick=function (){
alert('handlel');
};
e.onclick= function(){
alert('handle2');
};
运行上述代码后你会发现，单击test按钮后只会弹出一个显示handle2的提示框，因为第一个事件已经被第二个事件覆盖了。然而，使用EXT框架，你就不用担心这个问题，同一个事件可以依次被绑定到多个事件处理句柄上，如卜面的代码所示。
Ext .onReady ( function(){
var test:Ext.get('test');
test.on('click'，function() {
alert("handlel");
});
test.on('click'，function() {
alert("handle2");
});
));
首先使用Ext.get('test')获得HTML中id='test'对应的按钮，然后使用on('click',function (){})的形式为它添加两个监听函数，这两个函数会在触发单击(click)事件时依次执行，不会出现覆盖的问题。
