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'
}
 
var el = Ext.get('somelink');
el.on('click', onClick, null, {someProperty: 'someValue'});

 

 

Ø         添加多个事件处理器

如果你想在一个元素上添加多个事件处理器可以这样一次搞定。

el.on({
    'click' : {
     fn: this.onClick,
     scope: this,
     delay: 100
    },
    'mouseover' : {
     fn: this.onMouseOver,
     scope: this
    },
    'mouseout' : {
     fn: this.onMouseOut,
        scope: this
    }
});

 

 

Ø         总结

正如你看到的，Ext提供了很多功能使得你可以更容易处理事件。这篇文章我们讨论的所有基本的内容，如果你想学习更多，看看这个 the forum post by Jack Slocum.