ExtJs事件处理

ExtJs事件处理 
 
 非常基础的例子 
想象一下这样一个例子，当用户点击一个链接时，你想向他显示一则警告信息。请继续往下看，因为在开始处理事件前你也许想知道更多。 
var el = Ext.get('somelink'); el.on('click', function(){     alert('you click on a link'); }); 
注意，在这里我们使用了一个匿名处理函数。另外，你应该在DOM初始化后才执行上述代码（使用Ext.onReady()方法） 
  
 处理函数的作用域 好了，我们刚刚学习了最基础的事件处理。让我们看看其他一些我们能做的事。默认情况下，处理函数内的作用域是你绑定事件的元素。 
 
var el = Ext.get('somelink');el.on('click', function(){    alert(this.id); // 这里将显示'somelink'});注意this不是Ext Element对象。如果你想使用Ext的方法你必须使用"var el = Ext.get(this);" 
 
但如果我们想要改变处理函数内的作用域呢？你可以把那个对象作为作用域参数。  
function onClick = function(){    alert(this.someProperty); // 这里将显示'someValue'}; var scope = {    someProperty : 'someValue'} var el = Ext.get('somelink');el.on('click', onClick, scope);提示：更多关于作用域的信息请参见这里 
  
 传递参数 
在前面的例子中我们看到了如何改变处理函数内的作用域。但如果我们仍然想访问（与之相绑定的）元素呢？我们可以使用传递给处理函数的参数来进行操作。 
 
function onClick = function(ev, target){    alert(this.someProperty); // 这里将显示'someValue'    alert(target.id); // 这里将显示'somelink'}; var scope = {    someProperty : 'someValue'} var el = Ext.get('somelink');el.on('click', onClick, scope);如你所见，在这个例子中我们使用了第二个参数（target）。第一个参数












是Ext Event对象，我们可以使用此对象来做很多事情 
 
 使用事件 
传递到事件处理器的Ext的事件对象有多个方便的属性和方法，下面有几个例子：  
onClick = function(ev, target){    ev.preventDefault(); // 阻止浏览器对事件的默认处理行为    ev.stopPropagation(); // 阻止事件的传播    ev.stopEvent() // preventDefault + stopPropagation     var target = ev.getTarget() // 取得事件的目标 (和参数target是一样的)，返回的是一个Ext,Element对象    var relTarget = ev.getRelatedTarget(); // 取得相关的目标;想知道更多关于EventObject的用法，请参考文档 
  
 事件参数 
事件有很多可配置的参数，下面给出一个例子： 
 
Delayed Listeners (delayed event firing)  
el.on('click', this.onClick, this, {delay: 250});Buffered Listeners (buffers an event so it only fires once in the defined interval)  
el.on('click', this.onClick, this, {buffer: 100});"Handler" Listeners (prevents default and optionally stops propagation)  
// prevent defaultel.on('click', this.onClick, this, {preventDefault: true}); // only stop propagationel.on('click', this.onClick, this, {stopPropagation: true}); // prevent default and stop propagationel.on('click', this.onClick, this, {stopEvent: true});Other options  
el.on('click', this.onClick, this, {    single: true, // removed automatically after the first fire:    delegate: 'li.some-class' // Automatic event delegation!});   
 自定义的参数 
你也可以传递自定义的参数到事件处理器。当你想在事件处理代码内部使用一个变量，而不想改变作用域的时候这个功能就很有用了。要这样做基本上你只要将自定义参数添加到options对象就行了，请看下面的例子。 
function onClick(ev, target, options){ 
   alert(options.someProperty); // alerts 'someValue' }