ExtJs事件處理

Ø         非?；A(chǔ)的例子
想象一下這樣一個(gè)例子，當(dāng)用戶(hù)點(diǎn)擊一個(gè)鏈接時(shí)，你想向他顯示一則警告信息。請(qǐng)繼續(xù)往下看，因?yàn)樵陂_(kāi)始處理事件前你也許想知道更多。
var el = Ext.get('somelink');
el.on('click', function(){
    alert('you click on a link');
});
注意，在這里我們使用了一個(gè)匿名處理函數(shù)。另外，你應(yīng)該在DOM初始化后才執(zhí)行上述代碼（使用Ext.onReady()方法）
 
 
Ø         處理函數(shù)的作用域
好了，我們剛剛學(xué)習(xí)了最基礎(chǔ)的事件處理。讓我們看看其他一些我們能做的事。默認(rèn)情況下，處理函數(shù)內(nèi)的作用域是你綁定事件的元素。
 
var el = Ext.get('somelink');el.on('click', function(){    alert(this.id); // 這里將顯示'somelink'});注意this不是Ext Element對(duì)象。如果你想使用Ext的方法你必須使用"var el = Ext.get(this);"
 
但如果我們想要改變處理函數(shù)內(nèi)的作用域呢？你可以把那個(gè)對(duì)象作為作用域參數(shù)。
 
function onClick = function(){    alert(this.someProperty); // 這里將顯示'someValue'}; var scope = {    someProperty : 'someValue'} var el = Ext.get('somelink');el.on('click', onClick, scope);提示：更多關(guān)于作用域的信息請(qǐng)參見(jiàn)這里
 
 
Ø         傳遞參數(shù)
在前面的例子中我們看到了如何改變處理函數(shù)內(nèi)的作用域。但如果我們?nèi)匀幌朐L問(wèn)（與之相綁定的）元素呢？我們可以使用傳遞給處理函數(shù)的參數(shù)來(lái)進(jìn)行操作。
 
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);如你所見(jiàn)，在這個(gè)例子中我們使用了第二個(gè)參數(shù)（target）。第一個(gè)參數(shù)是Ext Event對(duì)象，我們可以使用此對(duì)象來(lái)做很多事情
 
Ø         使用事件
傳遞到事件處理器的Ext的事件對(duì)象有多個(gè)方便的屬性和方法，下面有幾個(gè)例子：
 
onClick = function(ev, target){    ev.preventDefault(); // 阻止瀏覽器對(duì)事件的默認(rèn)處理行為    ev.stopPropagation(); // 阻止事件的傳播    ev.stopEvent() // preventDefault + stopPropagation     var target = ev.getTarget() // 取得事件的目標(biāo) (和參數(shù)target是一樣的)，返回的是一個(gè)Ext,Element對(duì)象    var relTarget = ev.getRelatedTarget(); // 取得相關(guān)的目標(biāo);想知道更多關(guān)于EventObject的用法，請(qǐng)參考文檔
 
 
Ø         事件參數(shù)
事件有很多可配置的參數(shù)，下面給出一個(gè)例子：
 
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!});
 
 
Ø         自定義的參數(shù)
你也可以傳遞自定義的參數(shù)到事件處理器。當(dāng)你想在事件處理代碼內(nèi)部使用一個(gè)變量，而不想改變作用域的時(shí)候這個(gè)功能就很有用了。要這樣做基本上你只要將自定義參數(shù)添加到options對(duì)象就行了，請(qǐng)看下面的例子。
function onClick(ev, target, options){
   alert(options.someProperty); // alerts 'someValue'
}
 
var el = Ext.get('somelink');
el.on('click', onClick, null, {someProperty: 'someValue'});
 
 
Ø         添加多個(gè)事件處理器
如果你想在一個(gè)元素上添加多個(gè)事件處理器可以這樣一次搞定。
el.on({
    'click' : {
     fn: this.onClick,
     scope: this,
     delay: 100
    }, 
    'mouseover' : {
     fn: this.onMouseOver,
     scope: this
    },
    'mouseout' : {
     fn: this.onMouseOut,
        scope: this
    }
});
 
 
Ø         總結(jié)
正如你看到的，Ext提供了很多功能使得你可以更容易處理事件。這篇文章我們討論的所有基本的內(nèi)容，如果你想學(xué)習(xí)更多，看看這個(gè) the forum post by Jack Slocum.