Ext架构分析(1)--理解Ext.util.Event

 由于Ext2.0中所有的组件都是由Observable继承而来,理解Ext就需要先从Ext.util.Observable说起,而Observable是对Event对象进行管理,从而理解Observable必须首先从Ext.util.Event说起。
  Ext.util.Event是一个封装的非常精致的对象,但和你想象的不同,Event同任何的HTML DOM元素没有任何的关系(尽管Ext是处理HTML元素的),实际上,它是一个通用的事件及其事件的处理的对象。 也许有朋友要问,HTML Element本身已经支持了事件,为什么还要再重新设计一套Event机制呢?其实,基本上所有的javascript框架都会实现自己的Event机制,原因很多,但是至少有一点:HTML元素对于事件的处理是通过简单的单一绑定实现,也就是说,如果不进行任何的封装,你的事件只能唯一的绑定到一个事件处理句柄,举个例子:
  var e=document.getElementById("test");
  e.onclick=function(){alert("handle1")};
  e.onclick=function(){alert("handle2")};
  运行的结果你回发现,只会弹出一个"handle2"的alert框,因为第一个事件已经被第二个事件重载了。而使用Ext框架,你可以放心的解决这个问题,同一个事件可以依次被绑定到多个事件处理句柄上。
  Ext.util.Event对象构建器需要传入两个对象:obj(处理事件的缺省对象),name(事件名称)。在构建Event对象时,Event对象会同时构建一个事件的处理函数的数组:listeners,通过这个数组实现了一个事件的多个事件句柄函数的处理。
Ext.util.Event = function(obj, name){
  this.name = name;
  this.obj = obj;
  this.listeners = [];
};

通过Event的fire方法就可以依次触发该数组中的处理函数。 实际上,fire方法在遍历listeners数组中的处理函数过程中,只要处理函数的返回值为false,则不再继续运行后续的处理函数。所以,可以通过检查fire方法的返回值得知事件处理函数是否完全被运行。 
  

Ext架构分析(1)--理解Ext.util.Event fire :  function ()
Ext架构分析(1)--理解Ext.util.Event    
var ls = this.listeners, scope, len = ls.length; 
Ext架构分析(1)--理解Ext.util.Event    
if(len > 0)
Ext架构分析(1)--理解Ext.util.Event      
this.firing = true;//通过firing可以保证多个事件处理函数不会并发运行 
Ext架构分析(1)--理解Ext.util.Event
      var args = Array.prototype.slice.call(arguments, 0);//slice方法可以有效的进行数组的克隆 
Ext架构分析(1)--理解Ext.util.Event
      for(var i = 0; i < len; i++)
Ext架构分析(1)--理解Ext.util.Event        
var l = ls; 
Ext架构分析(1)--理解Ext.util.Event        
//事件的处理,只要有一个处理函数返回false,整个事件处理就被停止 
Ext架构分析(1)--理解Ext.util.Event
        if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false)
Ext架构分析(1)--理解Ext.util.Event          
this.firing = false
Ext架构分析(1)--理解Ext.util.Event          
return false
Ext架构分析(1)--理解Ext.util.Event        }
 
Ext架构分析(1)--理解Ext.util.Event      }
 
Ext架构分析(1)--理解Ext.util.Event      
this.firing = false
Ext架构分析(1)--理解Ext.util.Event    }
 
Ext架构分析(1)--理解Ext.util.Event    
return true
Ext架构分析(1)--理解Ext.util.Event  }
 
Ext架构分析(1)--理解Ext.util.Event


  Event可以通过addListener、removeListener、clearListeners(移除所有的事件处理函数)方法对listeners进行管理。但是,Listener中保存的事件处理函数实际上并不是addListener传递的函数,实际上,addListener传入的方法通过createListener对事件的处理函数进行了封装,通过封装,实现了对通一个重复事件的的三种不同处理方式:delay(延迟运行)、single(移除Listener中的处理函数,仅运行当前的处理函数)、buffer(避免重复运行处理函数)。 
 

Ext架构分析(1)--理解Ext.util.Event createListener :  function (fn, scope, o)
Ext架构分析(1)--理解Ext.util.Event    o 
= o || {}
Ext架构分析(1)--理解Ext.util.Event    scope 
= scope || this.obj; 
Ext架构分析(1)--理解Ext.util.Event    
var l = {fn: fn, scope: scope, options: o}
Ext架构分析(1)--理解Ext.util.Event    
var h = fn; 
Ext架构分析(1)--理解Ext.util.Event    
if(o.delay)
Ext架构分析(1)--理解Ext.util.Event      h 
= createDelayed(h, o, scope); 
Ext架构分析(1)--理解Ext.util.Event    }
 
Ext架构分析(1)--理解Ext.util.Event    
if(o.single)
Ext架构分析(1)--理解Ext.util.Event      h 
= createSingle(h, this, fn, scope); 
Ext架构分析(1)--理解Ext.util.Event    }
 
Ext架构分析(1)--理解Ext.util.Event    
if(o.buffer)
Ext架构分析(1)--理解Ext.util.Event      h 
= createBuffered(h, o, scope); 
Ext架构分析(1)--理解Ext.util.Event    }
 
Ext架构分析(1)--理解Ext.util.Event    l.fireFn 
= h; 
Ext架构分析(1)--理解Ext.util.Event    
return l; 
Ext架构分析(1)--理解Ext.util.Event  }
 
Ext架构分析(1)--理解Ext.util.Event
Ext架构分析(1)--理解Ext.util.Event
Ext架构分析(1)--理解Ext.util.Event  
var  createBuffered  =   function (h, o, scope) {
Ext架构分析(1)--理解Ext.util.Event    
var task = new Ext.util.DelayedTask();
Ext架构分析(1)--理解Ext.util.Event    
return function(){
Ext架构分析(1)--理解Ext.util.Event        task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 
0));
Ext架构分析(1)--理解Ext.util.Event    }
;
Ext架构分析(1)--理解Ext.util.Event  }
;
Ext架构分析(1)--理解Ext.util.Event  
var  createSingle  =   function (h, e, fn, scope) {
Ext架构分析(1)--理解Ext.util.Event    
return function(){
Ext架构分析(1)--理解Ext.util.Event        e.removeListener(fn, scope);
Ext架构分析(1)--理解Ext.util.Event        
return h.apply(scope, arguments);
Ext架构分析(1)--理解Ext.util.Event    }
;
Ext架构分析(1)--理解Ext.util.Event  }
;
Ext架构分析(1)--理解Ext.util.Event  
var  createDelayed  =   function (h, o, scope) {
Ext架构分析(1)--理解Ext.util.Event    
return function(){
Ext架构分析(1)--理解Ext.util.Event        
var args = Array.prototype.slice.call(arguments, 0);
Ext架构分析(1)--理解Ext.util.Event        setTimeout(
function(){
Ext架构分析(1)--理解Ext.util.Event          h.apply(scope, args);
Ext架构分析(1)--理解Ext.util.Event        }
, o.delay || 10);
Ext架构分析(1)--理解Ext.util.Event    }
;
Ext架构分析(1)--理解Ext.util.Event  }
;
Ext架构分析(1)--理解Ext.util.Event
Ext架构分析(1)--理解Ext.util.Event

你可能感兴趣的:(event)