ExtJS的組件和類，會在生命周期中調(diào)用一系列的事件独旷，事件允許你自己寫代碼控制你應(yīng)用程序的實際行為县恕，它是ExtJS的一個核心內(nèi)容。
什么是事件岔冀？
事件在你類中感興趣的地方發(fā)生，比如概耻，Ext.Component在渲染到屏幕的時候使套，ExtJS會在渲染完成后通知一個事件。我們可以通過配置一個listeners來監(jiān)聽那個事件鞠柄。
Ext.create('Ext.Panel', {
??? html: 'My Panel',
??? renderTo:Ext.getBody(),
??? listeners: {
??????? afterrender:function() {
???????????Ext.Msg.alert('Success!', 'We have been rendered');
??????? }
??? }
});
在例子中侦高，當(dāng)你點擊preview按鈕的時候，pannel渲染到屏幕厌杜，然后就會執(zhí)行定義好的aler信息奉呛。所有的時間在類的API頁面都有列出计螺，比如，Ext.panel.Panel共有45個監(jiān)聽事件瞧壮。
監(jiān)聽事件
在某些情況下登馒，Ext.Component#event-afterrender是非常有用的，其它咆槽，比如Ext.button.Button的click事件陈轿。
Ext.create('Ext.Button', {
??? text: 'Click Me',
??? renderTo:Ext.getBody(),
??? listeners: {
??????? click: function(){
???????????Ext.Msg.alert('Success!', 'I was clicked!');
??????? }
??? }
});
一個組件可能包含許許多多的事件監(jiān)聽，在下面的代碼中秦忿，我們通過調(diào)用this.hide()方法迷惑用戶麦射，當(dāng)我們鼠標(biāo)滑過的時候，按鈕就隱藏灯谣。一秒后潜秋，再讓它顯示。當(dāng)this.hide()方法調(diào)用的時候酬屉，hide方法就被觸發(fā)半等，hide事件觸發(fā)hide監(jiān)聽揍愁，一秒后讓按鈕顯示呐萨。
Ext.create('Ext.Button', {
??? renderTo:Ext.getBody(),
??? text: 'My Button',
??? listeners: {
??????? mouseover:function() {
??????????? this.hide();
??????? },
??????? hide: function(){
??????????? // Waits 1second (1000ms), then shows the button again
??????????? Ext.defer(function(){
???????????????this.show();
??????????? }, 1000,this);
??????? }
??? }
?});
事件監(jiān)聽在每次觸發(fā)的時候都會被調(diào)用，所以根據(jù)需要你可以不限次的顯示和隱藏按鈕莽囤。
監(jiān)聽后置
在先前的例子中谬擦，我們在組件初始化的時候給組件傳遞了監(jiān)聽，但是如果我們已經(jīng)有一個實例朽缎，我們也可以通過on 事件增加一個監(jiān)聽惨远。
var button = Ext.create('Ext.Button', {
??? renderTo:Ext.getBody(),
??? text: 'My Button'
});
button.on('click', function() {
???Ext.Msg.alert('Success!','Event listener attached by .on');
});
也可以通過on指定多個監(jiān)聽，跟使用listener監(jiān)聽一個道理话肖，下面跟上面的代碼相反北秽，讓按鈕show：
var button = Ext.create('Ext.Button', {
??? renderTo:Ext.getBody(),
??? text: 'My Button'
});
button.on({
??? mouseover: function(){
??????? this.hide();
??? },
??? hide: function() {
???????Ext.defer(function() {
??????????? this.show();
??????? }, 1000, this);
??? }
});
清除監(jiān)聽
在任何時候我們都可以增加監(jiān)聽，那在任何時候也可以移除監(jiān)聽最筒，使用un功能贺氓，就可以達(dá)到。下面自定義了一個doSomething（）方法床蜘，開始定義一個監(jiān)聽辙培，然后三秒后移除監(jiān)聽，開始有事件發(fā)生邢锯，后期因為移除了就不會有事件發(fā)生扬蕊。
var doSomething = function() {
???Ext.Msg.alert('listener called');
};
var button = Ext.create('Ext.Button', {
??? renderTo:Ext.getBody(),
??? text: 'My Button',
??? listeners: {
??????? click:doSomething,
??? }
});
Ext.defer(function() {
??? button.un('click',doSomething);
}, 3000);
節(jié)點監(jiān)聽選項
節(jié)點通過你的處理功能設(shè)置值，默認(rèn)是類來觸發(fā)這個事件丹擎，但這不是固定不變的尾抑，上面的例子是在this.hide（）方法調(diào)用hide()隱藏按鈕的，下面，我們創(chuàng)建一個按鈕和一個面板再愈，然后監(jiān)聽按鈕的點擊事件庶骄，作用域在面板內(nèi)，為了這樣做践磅，需要傳遞一個實例代替一個處理方法单刁，實例包含了一個AND節(jié)點方法：
var panel = Ext.create('Ext.Panel', {
??? html: 'Panel HTML'
});
var button = Ext.create('Ext.Button', {
??? renderTo:Ext.getBody(),
??? text: 'Click Me'
});
button.on({
??? click: function() {
???????Ext.Msg.alert('Success!', this.getXType());
??? },
??? scope: panel
});
當(dāng)然，也可以通過冗余的方式設(shè)置一些監(jiān)聽府适，如果你不需要整體簡潔的話：
var panel = Ext.create('Ext.Panel', {
??? html: 'Panel HTML'
});
var button = Ext.create('Ext.Button', {
??? renderTo:Ext.getBody(),
??? text: 'Click Me'
});
button.on({
??? click: {
??????? scope: panel,
??????? fn: function() {
???????????Ext.Msg.alert('Success!', this.getXType());
??????? }
??? }
});
運行后羔飞，點擊事件的this就是代表的panel了，我們可以通過alert節(jié)點組件的xtype觀察此項檐春。當(dāng)按鈕被點擊的時候我們能看到panel的xtype彈出逻淌。
單次監(jiān)聽
你可能也會想事件只監(jiān)聽發(fā)生一次，事件可能無限次發(fā)生疟暖，但是我們只想監(jiān)聽一次卡儒，下面展示一下：
var button = Ext.create('Ext.Button', {
??? renderTo:Ext.getBody(),
??? text: 'Click Me',
??? listeners: {
??????? click: {
??????????? single: true,
??????????? fn:function() {
???????????????Ext.Msg.alert('Success!','I will say this only once');
??????????? }
??????? }
??? }
});
使用Buffer配置
當(dāng)頻繁調(diào)用的時候我們可以通過buffer配置減少事件發(fā)生的次數(shù)，下面例子展示只有2秒的時候才會觸發(fā)一次事件的：
var button = Ext.create('Ext.Button', {
??? renderTo:Ext.getBody(),
??? text: 'Click Me',
??? listeners: {
??????? click: {
??????????? buffer: 2000,
??????????? fn: function() {
???????????????Ext.Msg.alert('Success!','I say this only once every 2 seconds');
??????????? }
??????? }
??? }
});
監(jiān)聽自定義事件
通過fireEvent調(diào)用自定義的方法俐巴，下面的例子使用了myEvent帶兩個參數(shù)骨望，按鈕本身和1-100之間的隨機數(shù)：
var button = Ext.create('Ext.Button', {
??? renderTo:Ext.getBody(),
??? text: "Just wait2 seconds",
??? listeners: {
??????? myEvent:function(button, points) {
???????????Ext.Msg.alert('Success!','myEvent fired! You score ' + points + 'points');
??????? }
??? }
});
Ext.defer(function() {
??? var number =Math.ceil(Math.random() * 100);
???button.fireEvent('myEvent', button, number);
}, 2000);
又使用了一次Ext.defer來延遲方法的執(zhí)行，這次是2秒欣舵，當(dāng)事件觸發(fā)的時候擎鸠，myEvent事件就展示傳入進來的參數(shù)。
監(jiān)聽DOM事件
并不是所有的ExtJS組件都有所有的事件缘圈，但是通過綁定到文檔中劣光，我們可以手動的給它添加一個事件，Ext.containner.Contener沒有click事件糟把，我們可以給定它一個：
var container = Ext.create('Ext.Container', {
??? renderTo:Ext.getBody(),
??? html: 'Click Me!',
??? listeners: {
??????? click:function(){
???????????Ext.Msg.alert('Success!', 'I have been clicked!')?
??????? }
??? }
});
container.getEl().on('click', function(){
???this.fireEvent('click', container);
}, container);
沒有下面的那段代碼绢涡，點擊事件就不會觸發(fā)，因為我們把組件的點擊事件綁定到監(jiān)聽器上遣疯，我們就擴展了容器的事件能力雄可。
事件標(biāo)準(zhǔn)化
事件標(biāo)準(zhǔn)化運行ExtJS5+應(yīng)用程序在不同的觸摸設(shè)備（不包括鼠標(biāo)鍵盤燈）上得以運行。事件在底層將事件轉(zhuǎn)換成觸摸設(shè)備支持的類型另锋。
當(dāng)你設(shè)置mosedown事件的時候滞项，在移動設(shè)備就會轉(zhuǎn)換為touchstrt事件：
myElement.on('mousedown',someFunction);
myElement.on('touchstart',someFunction);
而在支持pointerdown的設(shè)備中就會被轉(zhuǎn)換為
myElement.on('pointerdown',someFunction);
