JS注冊/移除事件處理程序(ExtJS應用程序設計實戰(zhàn))

更新時間：2013年05月07日 17:32:48 作者：

最常做的事情就是注冊事件處理程序，因為在ExtJS的世界里，幾乎完全由時間組成，下面是處理程序案例，感興趣的朋友可以參考下哈，希望可以幫助到你

在設計ExtJS應用程序時最常做的事情就是注冊事件處理程序，因為在ExtJS的世界里，幾乎完全由時間組成。因此，ExtJS的設計者使注冊事件變得非常容易(同時還提供了非常不容易的方式任你選擇)——on/un，也就是上與下兩種方式，或是addListener與removeListener，Element的所有子類都可以使用。例如有一個<div/>希望在用戶按下時能夠給予簡單的反饋：
<divid="happyDiv"class="happyStyle"/>
如何替這個<div/>注冊鼠標單擊事件呢？首先必須取得這個div的Element實例：
varhappyDiv=Ext.get('happyDiv');
然后是定義事件處理程序：

復制代碼代碼如下:

 
varclickHandler=function(event,eventTarget){ 
Ext.MessageBox.alert("Click","Youclicked:"+eventTarget.id); 
} 

再用on()將事件處理函數(shù)與Element實例連接起來：

復制代碼代碼如下:

happyDiv.on('click',clickHandler);

程序執(zhí)行時，單擊<div/>會出現(xiàn)圖3-15所示的結果。

很簡單，對吧？示例文件為ch03/event_demo.html。如果要移除這個事件處理程序，只需要把on()改為un()即可。移除時沒有對應click事件的事件處理程序也沒有關系，底層的EventManager會自行判斷。事件處理程序被調用時會接收三個參數(shù)——event、eventTarget和optionObj，示例中只用到兩個，第三個參數(shù)會在討論EventManager時加以說明。這里先將焦點放在event與eventTarget上，event的類型是Ext.Event，eventTarget則是HTML元素。瀏覽器在用戶按下<div/>時觸發(fā)click事件并且調用clickHanlder()，對于clickHanlder()而言，接收到的event就是瀏覽器觸發(fā)的click事件。evnetTarget就是事件目標，也就是<div/>，eventTarget.id的值就是“happyDiv”。至于事件的根類，應該去哪里尋找呢？答案

您可能感興趣的文章: