事件监听器是什么,事件监听器类型有哪些
使用事件监听器
在开发Adob Flex程序时,事件处理是最基本也是最重要的任务之一。事件让我们知道Flex程序中发生了一些事情。它们可以由用户设备(如鼠标和键盘)或外部输入(如网络服务调用的返回)生成。当界面或组件的生命周期发生变化时,它还会引发事件,例如组件的创建或销毁,或者组件的调整。
我们可以在代码中使用事件侦听器来处理这些事件。事件侦听器是我们编写来处理特定事件的函数或类方法。它们也被称为事件处理程序。
在本节中,我们将展示如何使用事件监听器。我们将学习如何为按钮控件编写事件侦听器,并学习如何使用两种不同的方法将该侦听器与按钮的click事件关联起来。
设置项目
在开始本节之前,首先确保我们已经完成了以下任务:
课程项目已创建
打开自动编译选项。
创建一个简单的用户界面
我们决定为我们的在线商店创建一个简单的转换器。我们希望用户可以指定美元的金额,点击按钮得到相应的日元金额。第一步是设计一个简单的用户界面。
1在browse视图中选择Lessons project,并创建一个名为Events.mxml的新程序文件.
Event.mxml程序被设置为默认的编译程序文件。
在3 MXML编辑器的设计模式下,将一个面板容器拖放到布局视图中,并设置以下属性:
标题:货币转换器
宽度:450
身高:150
X: 20
Y: 20
4向面板容器添加两个Label控件,一个TextInput控件和一个Button控件。
5排列控件,最终结果如下图所示:
6选择第一个Label控件,并将其text属性设置为Price in Dollars。
7选择TextInput控件,将其id属性设置为txtPrice。
8选择按钮控件并设置以下属性:
ID: btnConvert
标签:转换成日元
9选择第二个标签控件,并执行以下操作:
清除他的文本属性。
将其id属性设置为lblResult。
10设置控件的位置,最终布局如下图所示:
1切换到代码模式以检测Flex Builder生成的代码。
代码列表如下:
?xml版本=1.0 编码=utf-8 ?
MX:Application xmlns:MX= http://www . adobe . com/2006/mxml layout= absolute
mx:面板x=20 y=20 宽度=450 高度=150 布局=绝对
title=货币转换器
mx:Label x=25 y=37 text=美元价格/
MX:Label x= 120 y= 65 id= LBL results /
MX:TextInput x= 120 y= 35 id= txt price /
mx:Button x=290 y=35 label=转换为日元 id=btnConvert/
/mx:面板
/mx:应用程序
12保存文件。
编写一个事件侦听器。
接下来,我们将为按钮编写一个事件侦听器。我们希望这个事件侦听器由一个ActionScript函数组成,该函数可以计算和显示指定的美元到日元的转换。
1切换到代码模式,将插入点放在mx:Application标签之后。
添加mx:Script标记。
3输入以下CDATA结构:
公共函数convertCurrency():void {
var率:数量=120;
var price:Number=Number(txt price . text);
if (isNaN(price)) {
lblResults.text=请输入有效的价格。;
}否则{
价格=价格*费率;
LBL results . text= Price in Yen: String(Price);
}
}
public关键字指定了这个函数的作用域。在这个例子中,这个函数在我们的代码中是可见的。关键字void指定了这个函数的返回类型。的所有ActionScript函数都应指定返回类型。convertCurrency函数不返回值。
用户输入的价格txtPrice.text是一个数字,然后进行验证,确保用户输入的是一个数字。如果价格是一个数字,将执行计算过程,结果将作为字符串返回,显示在lblResult控件中。
在实际的程序中,汇率的值应该通过在运行时调用网络服务来设置。
4保存文件。
将听众与MXML事件联系起来
将一个侦听器与一个事件相关联,或者注册它,意味着我们在程序中包含一个侦听器,以声明特定类型的事件是由特定的源触发的。对于我们的程序,我们希望事件侦听器能够通知按钮的单击事件。当事件发生时,监听器执行货币计算并显示结果。
注册侦听器的一种方法是将其指定为mx:Button标记的click属性值。
我们还可以使用ActionScript来注册侦听器。
1在设计模式中,选择按钮控件,并在属性视图的On Clcik测试输入框中输入convertCurrency()。
2编译完成后,保存文件并运行程序。
3测试运行程序。
将侦听器与ActionScript事件相关联
我们使用ActionScript将侦听器与特定事件关联起来,比如鼠标单击。当这些事件发生时,监听器将被通知并运行。
1切换到代码模式。
2删除mx:Button标签中click属性的值。
3在convertCurrency事件侦听器的参数列表中声明一个MouseEvent类型参数,或MouseEvent类的一个子类。
公共函数convert currency(e:mouse event):void {
在这个例子中,这个监听器函数有一个flash类型的对象。这是Event类的一个子类。调用监听器函数时,Flex会隐式创建一个MouseEvent对象,并将其传递给该函数。因此,在我们的事件侦听器函数的参数列表中声明一个MouseEvent对象是一个好习惯。
4在convertCurrency函数中输入以下代码:
公共函数createListener():void {
BTN convert . addevent listener(mouse event。点击,convert currency);
}
当用户单击该按钮时,将通知convertCurrency事件侦听器发生了一个事件。监听器执行货币操作并显示结果。
脚本块代码如下:
mx:脚本
![CDATA[
导入flash . events . mouse event;
公共函数createListener():void {
BTN convert . addevent listener(mouse event。点击,convert currency);
}
公共函数convert currency(e:mouse event):void {
var率:数量=120;
var price:Number=Number(txt price . text);
if (isNaN(price)) {
lblResults.text=请输入有效的价格。;
}否则{
价格=价格*费率;
LBL results . text= Price in Yen: String(Price);
}
}
]]
/mx:Script
在5mx: application选项卡中,输入以下属性,以便在本地调用createListener()函数,并且在程序创建后立即注册事件侦听器。
creation complete= create listener();
最终的程序代码如下:
?xml版本=1.0 编码=utf-8 ?
MX:Application xmlns:MX= http://www . adobe . com/2006/mxml layout= absolute creation complete= create listener();
mx:脚本
![CDATA[
导入flash . events . mouse event;
公共函数createListener():void {
BTN convert . addevent listener(mouse event。点击,convert currency);
}
公共函数convert currency(e:mouse event):void {
var率:数量=120;
var price:Number=Number(txt price . text);
if (isNaN(price)) {
lblResults.text=请输入有效的价格。;
}否则{
价格=价格*费率;
LBL results . text= Price in Yen: String(Price);
}
}
]]
/mx:Script
mx:面板x=20 y=20 宽度=450 高度=150 布局=绝对
title=货币转换器
mx:Label x=25 y=37 text=美元价格/
MX:Label x= 120 y= 65 id= LBL results /
MX:TextInput x= 120 y= 35 id= txt price /
mx:Button x=290 y=35 label=转换为日元 id=btnConvert/
/mx:面板
/mx:应用程序
6保存文件,编译后运行。