ExtJs事件处理

刺骨的言语ヽ痛彻心扉 2023-07-12 14:11 6阅读 0赞

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' \}