Adobe® Flex™ 应用程序是事件驱动的。事件让程序员知道用户何时与界面组件交互, 以及在组件的外观或生命周期中何时发生重要的变化, 如组件的创建或破坏或调整其大小。
当组件的实例发出某个事件时, 会通知您注册为该事件的监听器的对象。您在 ActionScript 中定义事件监听器 (也称为事件处理程序) 来处理事件。您在组件的 MXML 声明中或者在 ActionScript 中注册事件的事件监听器。
接收事件通知有三种方式:
获得事件通知的第一个和使用最广泛的方法是在 MXML 中定义事件发生时会调用的事件处理程序。
在此示例中, 您为 Button 控件的 click 事件定义一个事件处理程序。用户单击 Button 控件时, 事件处理程序会将 Label 控件的 text 属性设置为“Hello, World!”。
click
text
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="200" horizontalAlign="center" verticalAlign="middle" > <mx:Script> <![CDATA[ import flash.events.MouseEvent; private function clickHandler ( event:MouseEvent ):void { myLabel.text = "Hello, World!"; } ]]> </mx:Script> <mx:Panel title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/> <mx:Button id="myButton" label="Click Me!" click="clickHandler(event);" /> </mx:Panel> </mx:Application>
在 MXML 定义中创建线上事件处理程序有时, 对事件作出响应最容易的方法是在组件的 MXML 定义中完全地定义事件处理程序。 这也称为使用线上事件处理程序。 在下面的示例中, 您设置 <mx:Button> 标签的 click 属性, 这样它会直接设置 Label 控件的 text 属性, 而不会调用事件处理程序方法。 提示: 使用线上事件处理程序可能很快并产生很少代码, 但它们也会导致代码很难阅读、维护和缩放。 不在一个线上事件处理程序中包含多个 ActionScript 语句是一个很好的经验。 如果您必须包含更加复杂的逻辑, 请将它置于 ActionScript 帮助器方法中或置于 ActionScript 事件处理程序中。示例<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" width="300" height="200" > <mx:Panel title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/> <mx:Button id="myButton" label="Click Me!" click="myLabel.text = 'Hello, World!'" /> </mx:Panel> </mx:Application>通过 ActionScript 注册事件监听器您还可以通过使用 ActionScript, 通过注册事件处理程序来对事件作出响应。 在此示例中, 您通过使用 ActionScript 中的 addEventHandler() 方法来注册事件处理程序。 您将 addEventHandler() 方法置于 Application 容器的 creationComplete 事件的事件处理程序中。 提示: Application 表单的 creationComplete 事件在 Application 表单及其子级被初始化之后, 在启动应用程序时发生。 creationComplete 事件的事件处理程序为您提供一个运行 ActionScript 代码以注册事件监听器的方便位置。示例 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" width="300" height="200" creationComplete="creationCompleteHandler(event);" > <mx:Script> <![CDATA[ import flash.events.MouseEvent; import mx.events.FlexEvent; private function creationCompleteHandler(event:FlexEvent):void { // 侦听 Button 控件的点击事件 myButton.addEventListener (MouseEvent.CLICK, clickHandler); } private function clickHandler ( event:Event ):void { myLabel.text = "Hello, World!"; } ]]> </mx:Script> <mx:Panel title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/> <mx:Button id="myButton" label="Click Me!" /> </mx:Panel> </mx:Application> 4 评论Comments
有时, 对事件作出响应最容易的方法是在组件的 MXML 定义中完全地定义事件处理程序。 这也称为使用线上事件处理程序。
在下面的示例中, 您设置 <mx:Button> 标签的 click 属性, 这样它会直接设置 Label 控件的 text 属性, 而不会调用事件处理程序方法。
<mx:Button>
提示: 使用线上事件处理程序可能很快并产生很少代码, 但它们也会导致代码很难阅读、维护和缩放。 不在一个线上事件处理程序中包含多个 ActionScript 语句是一个很好的经验。 如果您必须包含更加复杂的逻辑, 请将它置于 ActionScript 帮助器方法中或置于 ActionScript 事件处理程序中。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalAlign="middle" width="300" height="200" > <mx:Panel title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/> <mx:Button id="myButton" label="Click Me!" click="myLabel.text = 'Hello, World!'" /> </mx:Panel> </mx:Application>
通过 ActionScript 注册事件监听器您还可以通过使用 ActionScript, 通过注册事件处理程序来对事件作出响应。 在此示例中, 您通过使用 ActionScript 中的 addEventHandler() 方法来注册事件处理程序。 您将 addEventHandler() 方法置于 Application 容器的 creationComplete 事件的事件处理程序中。 提示: Application 表单的 creationComplete 事件在 Application 表单及其子级被初始化之后, 在启动应用程序时发生。 creationComplete 事件的事件处理程序为您提供一个运行 ActionScript 代码以注册事件监听器的方便位置。示例 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" width="300" height="200" creationComplete="creationCompleteHandler(event);" > <mx:Script> <![CDATA[ import flash.events.MouseEvent; import mx.events.FlexEvent; private function creationCompleteHandler(event:FlexEvent):void { // 侦听 Button 控件的点击事件 myButton.addEventListener (MouseEvent.CLICK, clickHandler); } private function clickHandler ( event:Event ):void { myLabel.text = "Hello, World!"; } ]]> </mx:Script> <mx:Panel title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/> <mx:Button id="myButton" label="Click Me!" /> </mx:Panel> </mx:Application> 4
您还可以通过使用 ActionScript, 通过注册事件处理程序来对事件作出响应。
在此示例中, 您通过使用 ActionScript 中的 addEventHandler() 方法来注册事件处理程序。 您将 addEventHandler() 方法置于 Application 容器的 creationComplete 事件的事件处理程序中。
addEventHandler()
creationComplete
提示: Application 表单的 creationComplete 事件在 Application 表单及其子级被初始化之后, 在启动应用程序时发生。 creationComplete 事件的事件处理程序为您提供一个运行 ActionScript 代码以注册事件监听器的方便位置。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" width="300" height="200" creationComplete="creationCompleteHandler(event);" > <mx:Script> <![CDATA[ import flash.events.MouseEvent; import mx.events.FlexEvent; private function creationCompleteHandler(event:FlexEvent):void { // 侦听 Button 控件的点击事件 myButton.addEventListener (MouseEvent.CLICK, clickHandler); } private function clickHandler ( event:Event ):void { myLabel.text = "Hello, World!"; } ]]> </mx:Script> <mx:Panel title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/> <mx:Button id="myButton" label="Click Me!" /> </mx:Panel> </mx:Application>
