v3_01 创造一个事件类型并派发事件对象 _Web前端

v3_01 创建一个事件类型并派发事件对象

v3_01 creating an event type and dispatching the event object? 创建一个事件类型并派发事件对象

?ex3_01

首先定义两个component

Choose.mxml

Preview.mxml

问题是:如何让Choose.mxml上的click事件,通知到Preview.mxml上呢?

这部分主要是讲,如何让两个component进行关联

主应用程序起到控制器作用

这里可以看到Choose.mxml 仍然是一个组件,它只是分派事件,将事件抛到主应用程序,而由主应用程序对事件进行处理和调度

创建并分派一个自定义事件有四步

1.在自定义组件中,首先使用Event元数据标签来定义事件类型的名称

在Choose.mxml中定义一个Event

<!-- Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<fx:Metadata>
[Event(name="showPreview", type="flash.events.Event")]
</fx:Metadata>

2.触发和处理用户或系统事件

将事件绑定到preview按钮上

<s:Button id="preview" 
label="Preview"
click="preview_clickHandler(event)"/>

3.实例化事件对象

4.将该事件对象分派到它的父组件,该父组件往往就主应用程序

//以下是实例化及分派,dispatchEvent将事件传回到主应用程序
protected function preview_clickHandler(event:MouseEvent):void
{
var eventObject:Event = new Event("showPreview");
dispatchEvent(eventObject);
}

5.主应用程序中处理该事件

当事件在Choose中触发,分派到主应用程序,主应用程序就可以对其进行处理

<components:Choose id="chooseEmployee"
employeeData="{employeeData}"
x="30" y="90"
showPreview="chooseEmployee_showPreviewHandler(event)"/>

<components:Preview id="previewEmployeeOfTheMonth"
title="Employee of the Month"
x="250" y="90"
width="250"
visible="false"/>

6.具体处理函数

//功能是打开previewEmployeeOfTheMonth 组件
protected function chooseEmployee_showPreviewHandler(event:Event):void
{
previewEmployeeOfTheMonth.visible = true;
}