有时候我们需要让两个组件之间实现联动，并且在其中传递数据，自定义事件机制可以帮助我们比较优雅的实现这种需要. 

下面的例子，是打算实现一个列表和一个编辑框的联动. 

编辑框代码 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init()">  
3.   
4.     <mx:Script>  
5.         <![CDATA[ 
6.             import my.DummySelectEvent; 
7.             import mx.controls.Alert; 
8.             private function init():void 
9.             { 
10.                 DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener); 
11.             } 
12.              
13.             private function dataChangeListener(event:DummySelectEvent):void 
14.             { 
15.                 var data = event.data; 
16.                 //Alert.show(event.data.name); 
17.                 detailPanel.changeMode(Detail.EDIT_SIMPLE,data); 
18.             } 
19.         ]]>  
20.     </mx:Script>  
21.       
22.     <mx:HBox x="104" y="126" width="1000">  
23.         <ns1:List>  
24.         </ns1:List>  
25.         <ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">  
26.         </ns1:Detail>  
27.     </mx:HBox>  
28.       
29. </mx:Application>  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="300" xmlns:my="my.*" creationComplete="initList()" xmlns:local="*">  
3.     <mx:Script>  
4.         <![CDATA[ 
5.             import my.DummySelectEvent; 
6.             import mx.events.FlexEvent; 
7.             import my.Dummy; 
8.             import mx.collections.ArrayCollection; 
9.             import mx.controls.Alert; 
10.              
11.             private var dummyList:ArrayCollection; 
12.              
13.             private var itemSelected:Boolean = false; 
14.              
15.             private function initList():void{ 
16.                 dummyList = new ArrayCollection(); 
17.                 for( var i:Number = 0;i<10;i++) 
18.                 { 
19.                     var dummy:Dummy = new Dummy(); 
20.                     dummy.name = "name"+i; 
21.                     dummy.email = "email"+i; 
22.                     dummy.mobile = "mobile" +i; 
23.                     dummy.address = "address"+i; 
24.                     dummy.qq = "qq"+i; 
25.                     dummy.msn = "msn"+i; 
26.                      
27.                     dummyList.addItem(dummy); 
28.                      
29.                 } 
30.                 dataGrid.dataProvider = dummyList; 
31.             } 
32.              
33.             private function itemSelect():void 
34.             { 
35.                 var dataChangeEvent:DummySelectEvent = new DummySelectEvent(dataGrid.selectedItem,DummySelectEvent.SELECTED_DATA_CHANGE); 
36.                 DummySelectEvent.dispatcher.dispatchEvent(dataChangeEvent); 
37.             } 
38.              
39.             private function deleteItem():void{ 
40.                 Alert.show("确定要删除？"); 
41.             } 
42.              
43.         ]]>  
44.     </mx:Script>  
45.       
46.     <mx:Spacer height="2">  
47.     </mx:Spacer>  
48.     <local:ListBar>  
49.     </local:ListBar>  
50.     <mx:DataGrid id="dataGrid"   
51.         x="0" y="0" width="100%" height="100%"  
52.         data="{dataGrid.selectedItem}"  
53.         dataChange="itemSelect()" >  
54.         <mx:columns>  
55.             <mx:DataGridColumn headerText="name" dataField="name"/>  
56.             <mx:DataGridColumn headerText="email" dataField="email"/>  
57.             <mx:DataGridColumn headerText="mobile" dataField="mobile"/>  
58.         </mx:columns>  
59.     </mx:DataGrid>  
60.     <mx:HBox width="100%">  
61.         <mx:Button label="删除选中" enabled="{itemSelected}" click="deleteItem()"/>  
62.     </mx:HBox>  
63.       
64. </mx:Panel>  

1. package my  
2. {  
3.     [Bindable]  
4.     public class Dummy  
5.     {  
6.         public function Dummy()  
7.         {  
8.               
9.         }  
10.           
11.         public var name:String;  
12.         public var mobile:String;  
13.         public var email:String;  
14.           
15.         public var qq:String;  
16.         public var msn:String;  
17.         public var address:String;  
18.           
19.     }  
20. }  

1. package my  
2. {  
3.     import flash.events.Event;  
4.     import flash.events.EventDispatcher;  
5.       
6.     public class DummySelectEvent extends Event  
7.     {  
8.         public var data:Object;  
9.         public static var SELECTED_DATA_CHANGE:String = "selectedDataChange";  
10.         public static const dispatcher:EventDispatcher=new EventDispatcher();  
11.         public function DummySelectEvent(data:Object,type:String)  
12.         {  
13.             super(type,true,false);  
14.             this.data = data;     
15.         }  
16.           
17.         override public function clone():Event  
18.         {  
19.             return new DummySelectEvent(data,type);  
20.         }  
21.     }  
22. }  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init()">  
3.   
4.     <mx:Script>  
5.         <![CDATA[ 
6.             import my.DummySelectEvent; 
7.             import mx.controls.Alert; 
8.             private function init():void 
9.             { 
10.                 DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener); 
11.             } 
12.              
13.             private function dataChangeListener(event:DummySelectEvent):void 
14.             { 
15.                 var data = event.data; 
16.                 //Alert.show(event.data.name); 
17.                 detailPanel.changeMode(Detail.EDIT_SIMPLE,data); 
18.             } 
19.         ]]>  
20.     </mx:Script>  
21.       
22.     <mx:HBox x="104" y="126" width="1000">  
23.         <ns1:List>  
24.         </ns1:List>  
25.         <ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">  
26.         </ns1:Detail>  
27.     </mx:HBox>  
28.       
29. </mx:Application>