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)文章
本文主要介紹了JavaScript基本類型值-Number類型的相關(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript實現(xiàn)生成GUID（全局統(tǒng)一標(biāo)識符）
這篇文章主要介紹了JavaScript實現(xiàn)生成GUID（全局統(tǒng)一標(biāo)識符）,本文寫成了一個GUID生成類,使用也非常方便,需要的朋友可以參考下2014-09-09
js幾個不錯的函數(shù) $$()...2006-10-10
JS表格組件BootstrapTable行內(nèi)編輯解決方案x-editable
這篇文章主要介紹了JS組件系列BootstrapTable行內(nèi)編輯解決方案：x-editable，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript實現(xiàn)的聯(lián)動菜單特效示例
這篇文章主要介紹了JavaScript實現(xiàn)的聯(lián)動菜單特效,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-07-07
下面小編就為大家?guī)硪黄猨s定時器+簡單的動畫效果實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
之前發(fā)了不少了去除字符串空格的代碼，但都是去除開始與結(jié)尾的，下面的這段代碼可以去除中間的。2009-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)美化滑塊效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
babel是一個廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)化為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這篇文章主要介紹了babel的使用以及安裝配置,需要的朋友可以參考下2018-02-02
這篇文章主要給大家介紹了關(guān)于JavaScript類型檢測的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04