点击展开示例
getMethodEvent : function(method){    
   if(!this.methodEvents)...{ this.methodEvents = {}; }                ①
   var e = this.methodEvents[method];
   if(!e)...{
e = ...{};this.methodEvents[method] = e;                     ②  
     e.originalFn = this[method]; e.methodName = method;
     e.before = []; e.after = [];
     var returnValue, v, cancel; var obj = this;
     var makeCall = function(fn, scope, args)...{                       ③
       if((v = fn.apply(scope || obj, args)) !== undefined)...{      
         if(typeof v === 'object')...{                                     ④
             if(v.returnValue!== undefined)...{returnValue = v.returnValue;}
else...{ returnValue = v; }
             if(v.cancel === true)...{ cancel = true; }}
else if(v === false)...{ cancel = true; }
else ...{ returnValue = v; } }
      }
    this[method] = function()...{                                        ⑤
      returnValue = v = undefined; cancel = false;
      var args = Array.prototype.slice.call(arguments, 0);       ⑥
      for(var i = 0, len = e.before.length; i < len; i++)...{        
          makeCall(e.before[i].fn, e.before[i].scope, args);      ⑦
          if(cancel)...{ return returnValue; } }      
if((v=e.originalFn.apply(obj,args))!==undefined)...{returnValue=v;}⑧  
    for(var i = 0, len = e.after.length; i < len; i++)...{          
          makeCall(e.after[i].fn, e.after[i].scope, args);         ⑨
          if(cancel)...{ return returnValue; } }
    return returnValue;
     };
  }
return e;
},
当开发者调用beforeMethod或afterMethod方法，它就通过了getMethodEvent方法生成一个与它指定的拦截的函数名对应的方法事件对象。这个对象中的有before和after两个集合属性。调用beforeMethod方法就会向这个before集合加入事件的监听方法。beforeMethod方法也类似，这个监听方法的参数就是当前拦截函数的参数，它的作用域是可以在beforeMethod或afterMethod中第三个参数指定。

开发者可以直接把把监听函数注册在当前组件某个方法的前面或后面，当运行这个方法时就会自动运行这些监听函数，达到了对组件的某些方法进行扩展。这样就不需要什么事件名等，在方法事件集合中，它的事件名就是拦截函数名。它的监听函数就是通过beforeMethod或afterMethod注册在拦截函数的前面或后面。这样的话，开发者的权利更大了，它可以在当前组件的前面或后面进行拦截扩展该函数的功能。

它并不取代现有的常规的事件机制，因为还有很多代码监测点是在函数的中间，而不是开始和结尾处。不过笔者觉得还是和常规的事件机制结合起来比较好，结合起来也不是很难的，只要在beforeMethod或afterMethod方法中参数中加上事件名，在getMethodEvent中对这个事件名进行判断，如果指定了就去传入参数执行该事件注册的监听函数。这个参数也可以根据需求在beforeMethod或afterMethod方法中参数中进行指定（通过增加config参数）。之后在组件的初始化过程中，调用beforeMethod或afterMethod方法来统一建立那些要分散在那些在函数内面前或后fireEvent监测点。这个统一的代码也可以移植到比如methodFire名的方法中。这样那些如代码清单4.21 的方法就很清爽，也不会影响到现在的事件机制。

说了半天的扩展，还没有去分析getMethodEvent方法是如何去运行的呢。在①处，它和常轨事件一样，建立methodEvents集合来保存事件对象，这个对象中事件名就是拦截的方法名，在②③之间代码就是构建这个事件对象，它的格式如下：

{originalFn:onselect,methodName:’ onselect’,before:[],after:[]}。

其中originalFn是指拦截的方法，methodName就是这个事件对应的事件名，和拦截方法名是一样的。接着的before和after就是用来保存该拦截方法的之前或之后执行的函数。

③处的makeCall是用来执行before和after集合的监听函数，⑦和⑨处的代码就是通过循环来分别运行它们各自己集合的监听函数。⑧处是运行拦截方法，⑦和⑨处正好是一个在函数前执行，一个在函数后执行。它们执行的就是makeCall函数，看出来吧，makeCall是包裹函数，它的包裹的主要作用就是处理返回值。

对于返回值，getMethodEvent建立了两个变量returnValue、cancel用来保存⑦和⑨代码每次运行时返回的状态，每次运行makeCall都会设定（改变或保持）其值。returnValue是保存其返回值，而cancel的意思是在运行完这个函数之后是否立马中断，不执行该函数链中其它函数。⑦和⑨处接下一行代码就是根据这个cancel的状态来进行是否中断函数链。在⑤处下面一行代码就是初始化这两个变量。

对于我们要实现的监听函数，其返回值可以分成三种，一种是Json对象的形式集合，如{ returnValue:xx,cancel:fase,otherattr:yy}。如果这个返回的对象中有returnValue属性，那么这个值就会设定为getMethodEvent函数的returnValue变量值。如果有cancel的话，那这个值就会设为cancel变量的值。第二种是该监听函数直接返回显式的false值,那么cancel就设为true，其链中之后的函数就不会执行。第三种是除这两种情况，都是把返回值设为returnValue变量值。这个returnValue是⑤处函数返回的值。⑤处的就是那个拦截的函数，现在如果访问那个拦截函数（当然是通过函数名），它的函数名已经指向了⑤处的函数。

⑤处的函数说起来也很简单，它就是把注册在其前面监听函数包括进来，再把之后的监听函数包括进来。与4.21不同是，现在的监测点是通过函数的拦截来自动实现。达到代码的解耦。

现在我们要执行this.beforeMethod(‘onSelect’, myFn，scope)函数分析其运行，首先通过执行beforeMethod方法第一行代码时候，那么其当前组件的methodEvents状态：

同时this.onselect函数指向的不再是原来函数，而是getMethodEvent中⑤处的函数。接着运beforeMethod第二行代码，其methodEvents状态改成：

当调用this.onSelect函数时，它接着会执行③处的makeCall函数，在makeCall函数中执行myFn函数。并返回其返回值，假如它没有设定返回值，接下来就执行⑧的的原来的onselect函数。要注意的是原来的onselect还在，只不过是其引用名变成originalFn。

Ext.util.observable这一组基于拦截的实现的。看起来很诱人，但是不成熟。如果不是很清楚其原理和机制，最好还是不要用到开发中去。

4.4.4组件及元素事件结合
上面我们分析了组件的事件机制，组件的事件有很多事件名如元素的事件是一样，如click等。组件的事件可以分成两类，一类是进行组件之间解耦及增加组件的扩展。另外一类就是和元素的事件一样是用来响应用户的键盘和鼠标操作，这一类事件是建立在元素事件基础之上。它的监听函数中一般都会有event的这样的元素事件对象保存事件发生的相关信息。

组件最终是落实在页面中显示出来，那么它就对应着一个元素，如想让该组件有click事件，就只要把这个组件的click事件移交到这个元素上的click事件就可以了。下面就通过Ext.form.Field进行说明。

1、它首先定义该组件的对应的DOM元素：在其属性中定义了defaultAutoCreate：
就是通过这个defaultAutoCreate来创建录前组件对应的DOM元素，这里它是一个text文本框。它是在其onRender方法中创建的：

这里它创建一个文本框，当前组件的el属性指向了这个文本框元素，在组件中，基本组件对应的元素都是采用当前组件的el属性指向它。接着在其initEvents中注册元素的事件：

在这里，它注册了三个元素事件，但是我们只列出其keypress事件，对于该元素的keypress时，那么就运行当前组件的fireKey函数。那么我们看一下其fireKey函数

fireKey是事件keydown 或 keypress的监听处理函数。而它又执行当前组件specialkey事件的监听函数。specialkey是是组件事件。用户只要通过如下代码就可以向它注册监听函数：

在这里我们也看到监听函数的第二个参数是元素的event对象。其规定是在initCompoent方法中this.addEvents{'specialkey'//同时还有/对事件监听函数的参数的说明注释部分}。这样就把组件的事件建立在元素的事件基础之上。对元素事件进行一些相关的处理改一个事件名就成其组件的事件（也可以不改名）。

通过这里，我们可以看Ext的元素事件是建立在DOM元素事件的基础之上，而Ext的组件事件（不包括做扩展用的事件）是建立在Ext元素的事件基础之上。