Flex事件機(jī)制用法揭秘
在學(xué)習(xí)Flex的過(guò)程中難免會(huì)遇到Flex事件機(jī)制方面的問(wèn)題,這里和大家分享一下,F(xiàn)lex的精髓之一就是事件和綁定機(jī)制,了解之后,能幫助大家更靈活的設(shè)計(jì)程序,也對(duì)新手上路有一定的幫助。
Flex事件機(jī)制
一.引言
很多新人對(duì)Flex事件機(jī)制都不太熟悉,在使用過(guò)程中難免會(huì)出現(xiàn)各種問(wèn)題,這是一個(gè)非常普遍的問(wèn)題,為了更快更好的幫助大家,將介紹一下Flex中事件的各種機(jī)制和用法。
Flex的精髓之一就是事件和綁定機(jī)制,了解之后,能幫助大家更靈活的設(shè)計(jì)程序,也對(duì)新手上路有一定的幫助。
講解可能不太系統(tǒng),也不全面,有很多沒(méi)有深入。如果高手看到后有疑問(wèn),歡迎指正。當(dāng)然各位也可以提出自己的看法,或者經(jīng)驗(yàn)分享,謝謝。
二.Flex事件機(jī)制介紹
1.什么是Flex事件機(jī)制
事件可以看作是一種觸發(fā)機(jī)制,當(dāng)滿(mǎn)足了一定的條件后,會(huì)觸發(fā)這個(gè)事件。比如MouseEvent就是指的當(dāng)鼠標(biāo)進(jìn)行操作之后觸發(fā)的一系列的事件。很多控件中都有click事件,這個(gè)事件就是一個(gè)MouseEvent的實(shí)例,當(dāng)點(diǎn)擊鼠標(biāo)后,系統(tǒng)會(huì)自動(dòng)拋出一個(gè)名稱(chēng)為click的MouseEvent事件(這種方法我們將在后面介紹到)。如果此時(shí)在click上注冊(cè)一個(gè)方法,那么觸發(fā)該事件時(shí)就會(huì)執(zhí)行這個(gè)方法。
Flex主應(yīng)用的mxml代碼
- <mx:Script>
- <![CDATA[
- importmx.controls.Alert;
- privatefunctionclickHandler(e:MouseEvent){
- Alert.show(e.currentTarget.toString());
- }
- ]]>
- </mx:Script>
- <mx:Buttonidmx:Buttonid="testBtn"click="clickHandler(event)"label="測(cè)試">
- </mx:Button>
在我們寫(xiě)代碼時(shí),編輯器的代碼補(bǔ)全提示列表中,有很多不同的圖標(biāo)。
那些帶有閃電的就是事件,三個(gè)小塊的就是樣式,空心圓圈的是屬性,實(shí)心圓點(diǎn)的是公有方法,還有一個(gè)是效果。
我們能在這個(gè)列表中看到的事件,我把它稱(chēng)之為事件注冊(cè)通道。(官方仍然稱(chēng)它為事件,但是它又和普通的事件含義不同。關(guān)于事件注冊(cè)通道會(huì)再下面講述到)
2.事件注冊(cè)通道
上面Flex事件機(jī)制說(shuō)到了這些通道是只能在mxml的代碼提示中可以看到的,他的作用就是給mxml組件提供事件觸發(fā)時(shí)所執(zhí)行的方法的注冊(cè)通道,而且能在代碼提示中可見(jiàn),這樣給組件提供了很大的抽象的好處,我們可以很清楚的告訴組件的使用者,組件里包含哪些事件給你調(diào)用。
為什么把他區(qū)別對(duì)待?除了代碼提示外,他還有一些實(shí)現(xiàn)上的不同。
Button的click事件是繼承自核心類(lèi)InteractiveObject,遺憾我們看不到他的源碼,但是說(shuō)明了“事件注冊(cè)通道”是可以繼承的。
我們會(huì)在自定義事件中講述到如何聲明“事件注冊(cè)通道”。
3.事件觸發(fā)方法
注冊(cè)通道中如果填入了函數(shù),那么就代表觸發(fā)該事件時(shí),會(huì)執(zhí)行這個(gè)方法。
- click="clickHandler(event)"
我們看到這個(gè)方法有一個(gè)event對(duì)象作為參數(shù)傳入,新人可能會(huì)問(wèn)到,這個(gè)event對(duì)象哪里來(lái)的?我也沒(méi)聲明這個(gè)變量啊。他實(shí)際上是注冊(cè)通道傳給他的,默認(rèn)變量名就是event。我們?nèi)绻朐谑录|發(fā)時(shí)傳其他的參數(shù),可以通過(guò)自定的事件對(duì)象來(lái)實(shí)現(xiàn)。
這個(gè)對(duì)象就是這個(gè)組件分發(fā)的事件對(duì)象,即type為“click”的MouseEvent的一個(gè)實(shí)例。
這個(gè)event對(duì)象包含了觸發(fā)該事件時(shí)的各種信息,比如觸發(fā)事件對(duì)象是哪個(gè),監(jiān)聽(tīng)對(duì)象是哪個(gè),觸發(fā)時(shí)鼠標(biāo)點(diǎn)在哪里等等,不同的event類(lèi)會(huì)包含不同的屬性,比如KeyboardEvent包含了鍵盤(pán)點(diǎn)擊了哪個(gè)鍵。
我們也可以通過(guò)自定義一個(gè)事件類(lèi),來(lái)傳遞我們自己想要的各種信息。(這在后面將介紹到)
4.事件分發(fā)
Flex事件機(jī)制最終繼承自EventDispatcher的對(duì)象都會(huì)含有dispatchEvent這個(gè)方法,他有一個(gè)參數(shù),事件對(duì)象。
之前說(shuō)到的事件注冊(cè)通道,他只是一個(gè)通道,實(shí)際上事件是由這個(gè)方法來(lái)分發(fā)出去的,通道只是一個(gè)管道而已。
他的作用就是分發(fā)一個(gè)事件對(duì)象,他的分發(fā)是沒(méi)有目的的,一種廣播形式的,F(xiàn)lex的事件監(jiān)聽(tīng)線程會(huì)接收到各種各樣的事件(我們稱(chēng)之為捕獲事件,這在后面會(huì)介紹到),那么哪種才是你要的事件,標(biāo)識(shí)就通過(guò)事件的type屬性來(lái)區(qū)分。
1)事件對(duì)象
在分發(fā)事件時(shí),將會(huì)分發(fā)一個(gè)事件對(duì)象出去。不管是那個(gè)事件類(lèi),都是繼承自flash.events.Event對(duì)象的,他包含一些比較重要的屬性,type和bubbles。
type是事件的類(lèi)型,事件監(jiān)聽(tīng)通過(guò)這個(gè)參數(shù)來(lái)識(shí)別是否是自己所監(jiān)聽(tīng)的事件。
bubbles是個(gè)布爾值,決定了該對(duì)象是否會(huì)向上傳遞。默認(rèn)是false。什么意思呢?畫(huà)個(gè)圖就明白了。
比如說(shuō),當(dāng)button組件分發(fā)click事件對(duì)象時(shí),設(shè)置的bubbles為false,那么他的分發(fā)是這樣的
示意代碼
- dispatchEvent(newMouseEvent(“click”,false));
事件對(duì)象無(wú)法跨越組件本身,當(dāng)然,除了之前講到的注冊(cè)通道(這樣就很形象了吧)
因此,如果沒(méi)有注冊(cè)通道,在Flex主應(yīng)用中,就無(wú)法捕獲到這個(gè)button組件分發(fā)出的事件。
如果我們將Bubbles設(shè)為true,他看起來(lái)就是這樣
- dispatchEvent(newMouseEvent(“click”,true));
可以看到,這個(gè)事件可以跨過(guò)組件本身,到達(dá)Flex主應(yīng)用里。不止這樣,在幫助手冊(cè)中明確說(shuō)到,如果在傳遞過(guò)程中間一直沒(méi)有被捕獲的話,這個(gè)事件會(huì)逐層上傳,直到最終的stage,那時(shí)如果還沒(méi)被捕獲,這個(gè)事件就會(huì)被銷(xiāo)毀掉。
這樣一來(lái),即使我們沒(méi)有click的事件通道,只要我們?cè)贔lex主應(yīng)用中添加事件監(jiān)聽(tīng)器(addEventListener)那么我們就可以獲得到這個(gè)分發(fā)出的click事件了。
那么,注冊(cè)通道不是沒(méi)用了嗎?不是,之前說(shuō)到過(guò),注冊(cè)通道是現(xiàn)式的,可見(jiàn)的,因此如果你的組件要給其他人使用,那么就非常一目了然,而不必知道你源碼中究竟分發(fā)了什么事件。但是,不要監(jiān)聽(tīng)和注冊(cè)同一個(gè)事件,這樣會(huì)重復(fù)執(zhí)行的。(后面將講到)
5.Flex事件機(jī)制中事件監(jiān)聽(tīng)
在分發(fā)中,我們講到,如果不是通過(guò)注冊(cè)通道來(lái)調(diào)用觸發(fā)事件,那么我們是需要一個(gè)監(jiān)聽(tīng)來(lái)捕捉的。如何捕捉到分發(fā)出的事件,就是通過(guò)事件的type值。
比如:
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx=http://www.adobe.com/2006/mxmllayout="absolute"xmlns:comp
- creationComplete='init()'
- >
- <mx:Script>
- <

















