学步园

最近在北京一家软件工作做web开发，用到了ExtJS，在工作的过程中，发现Ext的事件模型运用的非常广泛，几乎是无处不在，因此，总结了一些关于ExtJS事件的知识，晒出来与需要的人分享。

事件模型在Ext应用中有着尤为重要的作用。Ext中的事件模型分为两种类型：自定义事件和浏览器事件。

自定义事件：

   Ext中遵循一种树状的事件模型，所有继承自Ext.util.Observable类的控件都可以支持事件。可以为这些继承Ext.util.Observable的对象定义一些事件，然后为这些事件配置监听器，当某个事件触发时，会自动的调用相应的监听器，这些就是Ext的事件模型。

    下面通过继承Ext.util.Observable来实现一个支持事件的对象，显示过程代码如下：

    Person 类：

    Person =function(name){<br /> this.name=name;<br /> this.addEvents("walk","eat","sleep");<br /> }<br /> Ext.extend(Person,Ext.util.Observable,{<br /> info:function(event){<br /> return: this.name+'is'+'event'+'ing.';<br /> }<br /> });<br />  

以上代码实现了一个名为Person的对象，他有一个属性name，初始化时，调用addEvent函数定义了三个事件，walk，eat，sleep，然后使用Ext.extend()让Person继承了Ext.util.Observable的所有属性。此外，还加上了函数info()然他返回Person的信息。

接下来该怎么做呢？

我们在HTML中创建一个Person的实例，然后为它的事件配置好监听器，代码如下：

为Person添加事件监听器：

 var person =new Person('Lingo');<br /> person.on('walk',function(){<br /> Ext.Msg.alert('event',person.name+"在走啊走啊。");<br /> });<br /> person.on('eat',function(breakfast,lunch,supper){<br /> Ext.Msg.alert('event',person.name+"要吃"+breakfast+"，"+lunch+"和"+supper+"。");<br /> });<br /> person.on('sleep',function(time){<br /> Ext.Msg.alert('event',person.name+"从"+time.fromat("H")+"开始睡觉啦。");<br /> });<br />  

这里的on()是addEvent()的简写形式，功能完全一样。第一个参数传递事件名称，第二个参数是事件发生时执行的函数，为简单期间，我们在这里写生alert()的形式。

   现在准备工作已经都就绪，在这些事件被触发时就可以看到效果了，可是怎么触发呢？为了便于控制，我们设置3个按钮，在按钮按下时触发相应的事件。

   触发person的事件：

   Ext.get('walk').on('click',function(){<br /> person.fireEvent('walk');<br /> });<br /> Ext.get('eat').on('click',function(){<br /> person.fireEvent('eat','早餐','中餐','晚餐');<br /> });<br /> Ext.get('sleep').on('click',function(){<br /> person.fireEvent('sleep',new Date());<br /> });<br />  

   接着调用fireEvent就会触发事件，传入一个事件名称作为参数，该事件对应的监听函数就会执行。

   下面要讲述的是只有动态语言才有的特性，如果想给监听方法传递参数，直接把参数写到fireEvent()里面就行了，不用管参数数量，也不用管参数类型（字符串，数字，日期，数组等）。不过，需要确保监听函数可以处理你传过去的参数，如果监听函数需要某个参数，触发事件时却忘了传递过去，这时就会出错。这种因为动态语言的特性而导致的非直观错误非常难以查找。

   正如on是addListener的简写，removeListener的简写是un。你可以用它删除某个事件对应的监听函数，具体的操作代码如下：

   var function(){<br /> //too<br /> }<br /> person.on('walk',fn);<br /> person.un('walk',fn);<br />  

还有一个purgeListener()函数，一旦调用这个函数，所有的监听器都删掉了，请注意，是所有的监听器，一旦调用这个函数，所有的事件

都不起作用了。因此，一定要慎用。