Communicate with ItemRenderer by Event Bubbling

/**
 * Copyright Samples ( http://wonderfl.net/user/Samples )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/t7SA
 */

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initializeHandler(event)">
    <mx:Script>
    	<![CDATA[
       import mx.controls.Alert;
    	import mx.events.FlexEvent;
    	import mx.events.DynamicEvent;
    	public function initializeHandler(event:FlexEvent):void{
    		addEventListener("buy", clickBuyHandler);
    	}
    	public function clickBuyHandler(event:DynamicEvent):void{
    		Alert.show("Buy :" + event["bookData"]["author"]);
    	}
    	]]>
    </mx:Script>
    <mx:XML id="bookData" format="e4x">
        <books>
            <book>
                <author>Inoue Takehiko</author>
                <title>Real vol.9</title>
                <image>http://ecx.images-amazon.com/images/I/51%2BI8lyjDHL._SL500_AA240_.jpg</image>
            <date>Dec 3, 2004</date>
            </book>
            <book>
                <author>Inoue Takehiko</author>
                <title>Real vol.8</title>
                <image>http://ec2.images-amazon.com/images/I/51nU%2Bk9ZioL._SL500_AA240_.jpg</image>
            <date>Dec 3, 2004</date>
            </book>
        </books>
    </mx:XML>
	<mx:TileList width="100%" height="100%" dataProvider="{bookData.book}">
		<mx:itemRenderer>
			<mx:Component>
				<mx:HBox width="100%" height="100%" verticalAlign="top">
					<mx:Script>
					    <![CDATA[
					    import mx.events.DynamicEvent;
					    ]]>
					</mx:Script>
					<mx:Image width="240" height="240" source="{data.image}" />
					<mx:VBox verticalAlign="top" verticalGap="0">
						<mx:Text text="{data.title}" fontWeight="bold" width="100%" />
						<mx:Spacer height="20"/>
						<mx:Label text="{data.author}" />
						<mx:Label text="Available {data.date}" />
						<mx:Spacer height="100%" />
						<mx:HBox width="100%" horizontalAlign="right">
							<mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]" >
								<mx:click>
									<![CDATA[
										var buy:DynamicEvent = new DynamicEvent("buy", true);
										buy["bookData"] = data;
										dispatchEvent(buy);
									]]>
								</mx:click>
							</mx:Button>
						</mx:HBox>
					</mx:VBox>
				</mx:HBox>
			</mx:Component>
		</mx:itemRenderer>
	</mx:TileList>	
</mx:Application>