(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.