JS注冊/移除事件處理程序(ExtJS應(yīng)用程序設(shè)計實戰(zhàn))
更新時間：2013年05月07日 17:32:48 作者：
最常做的事情就是注冊事件處理程序，因為在ExtJS的世界里，幾乎完全由時間組成，下面是處理程序案例，感興趣的朋友可以參考下哈，希望可以幫助到你
在設(shè)計ExtJS應(yīng)用程序時最常做的事情就是注冊事件處理程序，因為在ExtJS的世界里，幾乎完全由時間組成。因此，ExtJS的設(shè)計者使注冊事件變得非常容易(同時還提供了非常不容易的方式任你選擇)——on/un，也就是上與下兩種方式，或是addListener與removeListener，Element的所有子類都可以使用。例如有一個<div/>希望在用戶按下時能夠給予簡單的反饋：
<divid="happyDiv"class="happyStyle"/>
如何替這個<div/>注冊鼠標(biāo)單擊事件呢？首先必須取得這個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所示的結(jié)果。
很簡單，對吧？示例文件為ch03/event_demo.html。如果要移除這個事件處理程序，只需要把on()改為un()即可。移除時沒有對應(yīng)click事件的事件處理程序也沒有關(guān)系，底層的EventManager會自行判斷。事件處理程序被調(diào)用時會接收三個參數(shù)——event、eventTarget和optionObj，示例中只用到兩個，第三個參數(shù)會在討論EventManager時加以說明。這里先將焦點放在event與eventTarget上，event的類型是Ext.Event，eventTarget則是HTML元素。瀏覽器在用戶按下<div/>時觸發(fā)click事件并且調(diào)用clickHanlder()，對于clickHanlder()而言，接收到的event就是瀏覽器觸發(fā)的click事件。evnetTarget就是事件目標(biāo)，也就是<div/>，eventTarget.id的值就是“happyDiv”。至于事件的根類，應(yīng)該去哪里尋找呢？答案
<divid="happyDiv"class="happyStyle"/>
如何替這個<div/>注冊鼠標(biāo)單擊事件呢？首先必須取得這個div的Element實例：
varhappyDiv=Ext.get('happyDiv');
然后是定義事件處理程序：
復(fù)制代碼 代碼如下:
varclickHandler=function(event,eventTarget){
Ext.MessageBox.alert("Click","Youclicked:"+eventTarget.id);
}
再用on()將事件處理函數(shù)與Element實例連接起來：
復(fù)制代碼 代碼如下:
happyDiv.on('click',clickHandler);
程序執(zhí)行時，單擊<div/>會出現(xiàn)圖3-15所示的結(jié)果。
很簡單，對吧？示例文件為ch03/event_demo.html。如果要移除這個事件處理程序，只需要把on()改為un()即可。移除時沒有對應(yīng)click事件的事件處理程序也沒有關(guān)系，底層的EventManager會自行判斷。事件處理程序被調(diào)用時會接收三個參數(shù)——event、eventTarget和optionObj，示例中只用到兩個，第三個參數(shù)會在討論EventManager時加以說明。這里先將焦點放在event與eventTarget上，event的類型是Ext.Event，eventTarget則是HTML元素。瀏覽器在用戶按下<div/>時觸發(fā)click事件并且調(diào)用clickHanlder()，對于clickHanlder()而言，接收到的event就是瀏覽器觸發(fā)的click事件。evnetTarget就是事件目標(biāo)，也就是<div/>，eventTarget.id的值就是“happyDiv”。至于事件的根類，應(yīng)該去哪里尋找呢？答案
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)點擊button按鈕切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Javascript格式化并高亮xml字符串的方法及注意事項
這篇文章主要介紹了Javascript格式化并高亮xml字符串的方法及注意事項,需要的朋友可以參考下2018-08-08
JS限制Textarea文本域字符個數(shù)的具體實現(xiàn)
這篇文章介紹了JS限制Textarea文本域字符個數(shù)的具體實現(xiàn)，有需要的朋友可以參考一下2013-08-08
在網(wǎng)頁中使用document.write時遭遇的奇怪問題
很多時候我們都會在網(wǎng)頁上的JavaScript中使用document.write來寫入一些東西，有的時候可能因為我們無法改變某一部分HTML而不得不使用這樣的辦法，也有的時候是因為在進行跨應(yīng)用的腳本調(diào)用。2010-08-08
本篇文章主要是對js獲取、清空input type="file"的值的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章給大家介紹了在echarts中如何在柱狀圖上方顯示文字,文中給出了完整的示例代碼,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
利用原生js實現(xiàn)html5小游戲之打磚塊（附源碼）
這篇文章主要給大家介紹了關(guān)于利用原生js實現(xiàn)html5小游戲之打磚塊的相關(guān)資料，這是最近工作遇到的一個小需求，文中通過示例代碼介紹的非常詳細(xì)，并分享了完整的源碼供大家參考學(xué)習(xí)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
ES6通過babel轉(zhuǎn)碼使用webpack使用import關(guān)鍵字
這篇文章主要介紹了es6通過babel轉(zhuǎn)碼還需要使用webpack才可以使用import關(guān)鍵字嗎的相關(guān)資料,需要的朋友可以參考下2016-12-12
JS賦值、淺拷貝和深拷貝（數(shù)組和對象的深淺拷貝）實例詳解
這篇文章主要介紹了JS賦值、淺拷貝和深拷貝,結(jié)合實例形式總結(jié)分析了JavaScript數(shù)組和對象的深淺拷貝相關(guān)概念、原理、操作技巧與使用注意事項,需要的朋友可以參考下2020-03-03
在JavaScript中,Number類型是基于IEEE754雙精度浮點數(shù)標(biāo)準(zhǔn)表示的,雖然在常見場景下非常高效,但在處理大數(shù)據(jù)時,Number類型存在顯著的精度限制,在這些場景中,如何精確處理大數(shù)據(jù)和超大數(shù)字成為了一個重要的問題,所以本文給大家介紹了JavaScript超過Number最大值的解決方案2025-01-01