How to handle and event on the parent component that is trigger on child component

Question

Maybe this code will be useful, the first is simple but the second is more advanced (maybe the best choice between them):

Here the links for download the SWF FILE for test both examples.

SWF LINK 1

SWF LINK 2

SOURCE 1: Note that the the function get the row that was clicked, but do not work correctly the binding between the checkbox and the arraycollection. This method will be useful for certain cases.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var extractRecipients:ArrayCollection;

            public function init():void{
                extractRecipients = new ArrayCollection();
                extractRecipients.addItem({reportDate:"DATE1",account:"A1",selected:true});
                extractRecipients.addItem({reportDate:"DATE2",account:"A2",selected:false});
                extractRecipients.addItem({reportDate:"DATE3",account:"A3",selected:false});
                extractRecipients.addItem({reportDate:"DATE4",account:"A4",selected:true});
            }

            public function changeEvent(event:Event):void{
                var ev:Object = event.currentTarget.data;
                txt.text = ev["reportDate"] + "-" + ev["account"] + "-" + ev["selected"];
            }
        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:DataGrid id="grdOperations0" dataProvider="{extractRecipients}" height="100%" width="100%" resizableColumns="true">
            <mx:columns> 
                <mx:DataGridColumn headerText="Elegir"   width="50" textAlign="center" rendererIsEditor="true" dataField="selected" editable="true">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:CheckBox selected="{data.selected}" change="{outerDocument.changeEvent(event)}">
                            </mx:CheckBox>                      
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn headerText="ColumnA"  dataField="reportDate" width="100" textAlign="center"/>
                <mx:DataGridColumn headerText="ColumnB"  dataField="account" width="50"/>
            </mx:columns>
        </mx:DataGrid>
        <mx:TextArea id="txt" borderStyle="solid" width="300" height="300"/>
    </mx:VBox>
</mx:Application>

SOURCE 2: This code is more complex, in my case, when I had to do this, i created a ItemRendererComponente in other source file, but in this example the code is inside the checkbox.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.CollectionEvent;
            [Bindable]
            public var extractRecipients:ArrayCollection;

            public function init():void{
                extractRecipients = new ArrayCollection();
                extractRecipients.addItem({reportDate:"DATE1",account:"A1",selected:true});
                extractRecipients.addItem({reportDate:"DATE2",account:"A2",selected:false});
                extractRecipients.addItem({reportDate:"DATE3",account:"A3",selected:false});
                extractRecipients.addItem({reportDate:"DATE4",account:"A4",selected:true});
                extractRecipients.addEventListener(CollectionEvent.COLLECTION_CHANGE,changeEvent);
            }

            public function changeEvent(event:Event):void{
                var str:String = "";
                for each(var obj:Object in (event.currentTarget as ArrayCollection)){
                    str += obj["reportDate"] + "-" + obj["account"] + "-" + obj["selected"] + "\n";
                }
                txt.text = str;
            }
        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:DataGrid id="grdOperations0" dataProvider="{extractRecipients}" height="100%" width="100%" resizableColumns="true">
        <mx:columns> 
            <mx:DataGridColumn headerText="Elegir"   width="50" textAlign="center" rendererIsEditor="true" dataField="selected" editable="true">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:CheckBox selected="{data.selected}" change="onChange()">
                            <mx:Script>
                                <![CDATA[
                                    import mx.collections.ArrayCollection;
                                    import mx.controls.dataGridClasses.DataGridListData;
                                    import mx.controls.listClasses.BaseListData;
                                    import mx.events.CollectionEvent;
                                    import mx.events.FlexEvent;
                                    import mx.controls.DataGrid;

                                    private var _dataField:String;
                                    private var _listData:BaseListData;
                                    private var _dataGrid:Object;

                                    override public function set listData(value:BaseListData):void {
                                        _listData = value;
                                        _dataGrid = value.owner;
                                        _dataField = (value as DataGridListData).dataField;
                                    }

                                    override public function set data(value:Object):void {      
                                        super.data = value;
                                        // Dispatch the dataChange event.
                                    }

                                    private function onChange():void {
                                        data[_dataField] = this.selected;
                                        var dp:ArrayCollection = (_dataGrid as DataGrid).dataProvider as ArrayCollection;
                                        dp.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
                                    }

                                ]]>
                            </mx:Script>
                        </mx:CheckBox>                      
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="ColumnA"  dataField="reportDate" width="100" textAlign="center"/>
            <mx:DataGridColumn headerText="ColumnB"          dataField="account" width="50"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:TextArea id="txt" borderStyle="solid" width="300" height="300"/>
    </mx:VBox>
</mx:Application>

I hope this will help you.