1. 處理HTML元素的標準事件
HTML元素的標準事件是指mouseover、mousedown、click、 blur、focus、change等。在ExtJS中,這些事件的處理如下:
- 注冊一個事件處理函數使用: Ext.get('myElement').on('click', myHandler, myScope) myElement是要注冊的元素的ID,click是事件的名稱(注意,和HTML元素中的聲明onXXX不同,這里不需要on),myHandler 是處理函數的函數名稱,myScope是一個可選的參數,指定處理函數綁定的對象,也就是處理函數的作用域,如果不提供這個參數,則是默認的 window。
- 撤銷一個事件處理函數: Ext.get('myElement').un('click', myHandler, myScope) 參數的意義同上。
ExtJS 會根據不同的瀏覽器進行相應的處理,支持多瀏覽器。事件處理函數的參數只能參考ExtJS的文檔了,必要時還得參考源代碼。
2. 處理自定義事件
在ExtJS中使用自定義事件,需要從Ext.util.Observable繼承,示例代碼如下:
Employee = function(name){ this.name = name; this.addEvents({ "fired" : true, "quit" : true }); } Ext.extend(Employee, Ext.util.Observable, { ... });
在這段代碼中,定義了一個Employee類,定義了fired和quit兩個事件。如何觸發這兩個事件呢,基類 Ext.util.Observable提供了觸發自定義事件的方法fireEvent(eventName, arg1, arg2, ... argn), eventName是要觸發的時間的名稱(不區分大小寫),后面的參數arg1,arg2等是要傳給事件處理函數的參數。用上面的Employee類做示例,觸發quit事件:
this.fireEvent('quit', this);
這行代碼將觸發quit事件,并將Empolyee類的實例傳給quit事件的處理函數,quit事件的訂閱可以采用如下代碼:
function myHandler1(empolyee){ ... } function myHandler2(empolyee){ ... } var emp = new Empolyee('tom'); emp.on('quit', myHandler1); emp.on('quit', myHandler2);
在上面的代碼中,為quit事件注冊了兩個處理函數(myHandler1與myHandler),當quit事件被激發時,將會依次調用 myHandler1和myHandler2兩個函數。
值得注意的是,不管是HTML元素的標準事件還是自定義事件,如果為某個時間注冊了多個處理函數,如前面的例子,如果myHandler1返回 false的話,則會取消在myHandler1之后注冊的處理函數的執行,即該事件被取消,從而停止繼續執行該事件的處理函數,而這個返回值false 會作為事件激發的結果,返回給empolyee,即:
var result = this.fireEvent('quit', this); if (result === false) { alert('event canceled'); //這里表示事件被某個處理函數取消 } else { alert('event complete'); // 這里表示事件執行完畢 }
通過Ext的自定義事件的機制,可以實現一對多的觀察者模式,也可以實現一對一的綁定模式,這一點,在ExtJS的開發中是很重要的。