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