(Ext)Ext事件的处理

Ext事件的处理

在Javascript中，你将不得不经常进行事件的处理。这有时很难顺利进行，因为你需要进行不同的跨浏览器标准化事件处理。而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 default
el.on('click', this.onClick, this, {preventDefault: true});

// only stop propagation
el.on('click', this.onClick, this, {stopPropagation: true});

// prevent default and stop propagation
el.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.