JS註冊/移除事件處理程序(ExtJS應用程式設計實戰)_javascript技巧

在設計ExtJS應用程式時最常做的事情就是註冊事件處理程序，因為在ExtJS的世界裡，幾乎完全由時間組成。因此，ExtJS的設計者讓註冊事件變得非常容易(同時也提供了非常不容易的方式任你選擇)－on/un，也就是上與下兩種方式，或是addListener與removeListener，Element的所有子類別都可以使用。例如有一個

希望在使用者按下時能夠給予簡單的回饋：

如何替這個

註冊滑鼠點擊事件呢？首先必須取得這個div的Element實例：
varhappyDiv=Ext.get('happyDiv');
然後是定義事件處理程序：

複製程式碼

複製程式碼

複製程式碼

複製程式碼

程式碼如下: varclickHandler=function(event,eventTarget){ Ext.MessageBox.alert("Click","Youclicked:" eventTarget.id );

}

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

複製代碼 程式碼如下: happyDiv.on('click',clickHandler); 程式執行時，點選

會出現圖3-15所示的結果。 很簡單，對吧？範例檔案為ch03/event_demo.html。如果要移除這個事件處理程序，只需要把on()改為un()即可。移除時沒有對應click事件的事件處理程序也沒關係，底層的EventManager會自行判斷。事件處理程序被呼叫時會接收三個參數－event、eventTarget和optionObj，範例只用到兩個，第三個參數會在討論EventManager時加以說明。這裡先將焦點放在event與eventTarget上，event的型別是Ext.Event，eventTarget是HTML元素。瀏覽器在使用者按下

時觸發click事件並且呼叫clickHanlder()，對於clickHanlder()而言，接收到的event就是瀏覽器觸發的click事件。 evnetTarget就是事件目標，也就是

，eventTarget.id的值就是「happyDiv」。至於事件的根類，該去哪裡找呢？答案