第四章 第五节使用事件监听器
当你开发Adobe Flex 应用程序时，事件处理/event handling 是最基本而且最重要的任务
之一。事件让你知道何时发生了何事。它们可以由用户设备如鼠标和键盘来产生，或者其它
外部输入如web 服务器调用的返回而产生。事件还可以由一个组件的生命周期发生变化时
触发，如创建或摧毁某个组件。
你可以使用事件监听器/ event listeners 来对某个事件作出反应。事件监听器是你所编写
的，用来对特定事件作出响应的功能函数或类方法，也就是我们所熟知的事件处理。
本节将教授你如何使用事件监听器，使用两种不同的方法对按钮单击事件作出响应。
创建一个简单的用户界面
你打算为在线商店创建一个简单的货币对换器，使用户可以将美元对换成等值的人民
币。要做的第一步是设计一个简单的用户界面。
1. 在导航视图中选定Lessons 项目，选择File > New > MXML Application 并创建一个名
叫Events.mxml 的文件。
2. 将Events.mxml 设置为被编译的默认文件，并在关联菜单中选择Set As Default
Application。
3. 在MXML 编辑器的设计模式下，从组件视图中拖拉一个面板容器到布局上，并设置
相应的属性：
Title: Currency Converter
Width: 450
Height: 150
X: 20
Y: 20
4. 从组件视图中拖拉两个Label 控件，一个TextInput 控件和一个按钮控件到面板容器
中。
5. 布置这些控件，使布局看起来就象这样：
6. 选择第一个Label 控件，将它的文本属性设置为Price in Dollars。
7. 选择TextInput 控件，并将它的id 属性值设置为txtPrice。
8. 选择按钮控件并进行相应的设置：
ID: btnConvert
Label: Convert to Yen
9. 选择第二个Label 控件（位于TextInput 控件下）并进行相应的设置：
清空它的文本属性值
将 lblResults 作为它的id 属性值
10. 调整好控件的位置，使它看起来就象这样：
11. 切换到源代码模式下，输入如下代码（你可以改变其中的坐标数值）：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="20" y="20" width="450" height="150" layout="absolute"
title="Currency Converter">
<mx:Label x="25" y="37" text="Price in Dollars"/>
<mx:Label x="120" y="65" id="lblResults"/>
<mx:TextInput x="120" y="35" id="txtPrice"/>
<mx:Button x="290" y="35" label="Convert to Yen" id="btnConvert"/>
</mx:Panel>
</mx:Application>
12. 保存文件。
编写一个事件监听器
接下来，为转换人民币按钮编写一个事件监听器。该事件监听器的ActionScript 功能函
数可以进行计算并以人民币为单位进行显示。
1. 切换到源代码模式下，在<mx:Application>中放置插入点。
2. 输入<mx:Script>直到整个标签在代码提示中被选定，按下Enter 键在代码中插入标
签，随后输入结束方括号。
<mx:Script>脚本块包含了CDATA 结构。
3. 在CDATA 结构输入随后的代码：
public function convertCurrency():void {
var rate:Number = 120;
var price:Number = Number(txtPrice.text);
if (isNaN(price)) {
lblResults.text = "Please enter a valid price.";
} else {
price = price * rate;
lblResults.text = "Price in Yen: " + String(price);
}
}
4. 保存文件。
使用 MXML 将监听器与事件相关联
将一个监听器与一个事件相关联，或者注册它，就意味着在你的应用程序中包含了某种
逻辑，用来通知触发事件的监听者。
注册监听器的一种方法是在<mx:Button>标签中将它指定为click 的属性值。
同时，你还可以使用ActionScript 去注册监听器。
1. 在设计模式下， 选择按钮控件并在属性视图中的On Click 文本框中输入
convertCurrency（）。
2. 保存文件，编译后运行。
3. 输入价格，并点击“Convert to Yen”按钮。
TextInput 控件下方的Label 控件将以人民币为单位进行显示。
使用 ActionScript 将监听器与事件相关联
你还可以使用ActionScript 将监听器与指定的事件相关联，如鼠标点击。每当事件发生
时，监听器就被通报并开始运行。
1. 切换到源代码模式。
2. 删除<mx:Button>标签中的click 属性和它的数值。
3. 在convertCurrency 事件监听器中声明一个事件对象，就象这样：
public function convertCurrency(e:Event):void {
...
每当监听器的功能函数被调用时，Flex 创建一个事件对象并传递给监听器。因此，最好
的办法是在监听器的功能函数中声明事件对象。因此，你在convertCurrency 函数中声明了
一个叫e 的事件类型对象。
4. 在<mx:Script> 标签中的convertCurrency 函数前输入随后的代码：
public function createListener():void {
btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency);
}
每当用户点击btnConvert 按钮，convertCurrency 事件监听器就被通知相应的触发事件已
经发生。监听器函数执行货币计算并显示结果。
脚本块看起来就象这样：
<mx:Script>
<![CDATA[
public function createListener():void {
btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency);
}
public function convertCurrency(e:Event):void {
var rate:Number = 120;
var price:Number = Number(txtPrice.text);
if (isNaN(price)) {
lblResults.text = "Please enter a valid price.";
} else {
price = price * rate;
lblResults.text = "Price in Yen: " + String(price);
}
}
]]>
</mx:Script>
5. 在<mx:Application>标签中，输入随后的属性值以便createListener（）功能函数被调
用，并且使事件监听器在程序被创建后立即被注册：
creationComplete="createListener();"
<mx:Application>标签看起来就象这样：
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="createListener();">
6. 保存文件，编译后运行。
7. 输入价格并点击“Convert to Yen”按钮。
TextInput 控件下方的Lable 控件将以人民币为单位进行显示。
在本节中，你学习了为按钮控件编写一个事件监听器，然后使用两种方法将它与按钮单
击事件相关联。在第一种方法中，你通过指定按钮控件的MXML 标签里的click 属性来进
行关联。在第二种方法中，你使用ActionScript 功能函数来进行关联。
加支付宝好友偷能量挖...
