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