JS注冊(cè)/移除事件處理程序(ExtJS應(yīng)用程序設(shè)計(jì)實(shí)戰(zhàn))

2019-11-20 22:44:22

字體：大中小

供稿：網(wǎng)友

在設(shè)計(jì)ExtJS應(yīng)用程序時(shí)最常做的事情就是注冊(cè)事件處理程序，因?yàn)樵贓xtJS的世界里，幾乎完全由時(shí)間組成。因此，ExtJS的設(shè)計(jì)者使注冊(cè)事件變得非常容易(同時(shí)還提供了非常不容易的方式任你選擇)――on/un，也就是上與下兩種方式，或是addListener與removeListener，Element的所有子類都可以使用。例如有一個(gè)<div/>希望在用戶按下時(shí)能夠給予簡(jiǎn)單的反饋：
<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的類型是Ext.Event，eventTarget則是HTML元素。瀏覽器在用戶按下<div/>時(shí)觸發(fā)click事件并且調(diào)用clickHanlder()，對(duì)于clickHanlder()而言，接收到的event就是瀏覽器觸發(fā)的click事件。evnetTarget就是事件目標(biāo)，也就是<div/>，eventTarget.id的值就是“happyDiv”。至于事件的根類，應(yīng)該去哪里尋找呢？答案

上一篇：JavaScript通過(guò)RegExp實(shí)現(xiàn)客戶端驗(yàn)證處理程序

下一篇：使用Math.floor與Math.random取隨機(jī)整數(shù)的方法詳解