FLEX/FLASH-冒泡事件與非冒泡事件

1.

項目 右鍵 建立 包

右鍵單擊建立的包，建立 actionscript類

代碼如下(代碼1)

package btnEvents {     import flash.events.Event;     public class btnEvent1 extends Event     {         public static var EVENT_NAME:String="customEvent";         //該事件所攜帶的資料         public var EventData:String;                public function btnEvent1(type:String, bubbles:Boolean=false, cancelable:Boolean=false)         {             super(type, bubbles, cancelable);         }     } }

2.

主MXML檔案如下所示

<?xml version="1.0" encoding="utf-8"?>                xmlns:s="library://ns.adobe.com/flex/spark"                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:Modules="Modules.*"                creationComplete="init()"                >     <fx:Script>         <![CDATA[             import btnEvents.btnEvent1;             private function init():void{                 this.addEventListener(btnEvent1.EVENT_NAME,appCatchMyEvent,true);                 this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,true);             }             private function sendEvent(flag:int):void{                 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME);                 if(flag == 1){                     Event.EventData = "内部按鈕";                     btn1.dispatchEvent(Event);//将事件分派到事件流中                 }else{                     Event.EventData = "外部按鈕";                     btn2.dispatchEvent(Event);//将事件分派到事件流中                 }             private function appCatchMyEvent(par_event:btnEvent1):void{                 label1.text += par_event.currentTarget.id+par_event.EventData;//currentTarget是傳播路徑上的目前捕捉者             private function panelCatchEvent(par_event:btnEvent1):void{                 label1.text += par_event.currentTarget.id+par_event.EventData;         ]]>     </fx:Script>     <fx:Declarations>         <!-- 将非可視元素（例如服務、值對象）放在此處 -->     </fx:Declarations>     <s:Panel id="panel1" x="198" y="128" width="250" height="200">         <s:Button click="sendEvent(1)" id="btn1" x="89" y="61" label="内部BTN"/>     </s:Panel>     <s:Button id="btn2" click="sendEvent(2)" x="378" y="360" label="外部BTN"/>     <s:Label id="label1" x="198" y="66" text="事件來自～～～～" width="189"/> </s:Application>

3.

運作程式

點選“内部BTN：

結果如圖所示

大家可以看到

事件是從外層容器到内層容器依次執行的

4.

重新整理頁面

點選“外部BTN”

因為事件的引發者沒有在panl1中是以不會再觸發panel1的事件了

以上說的都是非冒泡事件，事件的執行順序是從外層容器到内層容器執行的

5.

如果要在事件冒泡階段捕捉事件

建立事件的代碼為

var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最後一個參數bubbles應為true

事件監聽的代碼應如下

this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//最後一個參數useCapture是false

這樣設定後就是冒泡事件，事件的執行順序是從内層容器到外層容器執行的

6.

如果即要捕捉非冒泡事件，又要捕捉冒泡事件

那麼

同時，監聽事件的代碼還要設定兩次

this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,true);//非冒泡監聽

this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//冒泡監聽

這樣設定之後，事件先從外部執行到内部，在從内部執行到外部