Flex 3 cookbook翻译: 2.1 监听Button的Click事件

 

第 2 章 菜单和控件

 

Flex3 SDK 提供了一个大的预定义 UI 控件库，这加快了程序开发。通过 ActionScript 或者 MXML 改变他们的属性，你可以很容易地控制这些控件的行为，同时你也可以用 CSS 来改变他们的外观。另外，由于 ActionScript 3 是一种成熟的 OOP 语言，所以你可以像通常的 OOP 语言一样，扩展这些默认的控件，来提供自定义的功能。

Flex 3 SDK 提供的控件位于 mx.controls 包。在写这本书的时候， mx.controls 包里面有超过 50 个控件。他们为建构丰富的用户界面提供模块。

 

2.1 监听 Button 的 Click 事件

 

2.1.1 问题

 

 

你需要对用户行为作出反应，执行一个任务。比如用户点击一个按钮时输出一列姓名。

 

 

2.1.2 解答

 

 

在 MXML 里，用 <mx:Button> 标签的 click 事件属性来为 click 事件指派一个事件处理器。另外，在 ActionScript 里用 button 实例的 addEventListener 方法来为 click 事件指派一个侦听器。

 

 

2.1.3 讨论

 

 

下面的代码显示了怎样监听一个 button 的 click 事件。这里用 MXML 为 <mx:Button> 标签的 click 事件属性指派一个事件处理器。

 

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical">

    <mx:Button id="btn" label="Show Names" click="showNames(event)"/>

    <mx:Script>
        <![CDATA[

            private function showNames(evt:MouseEvent):void
            {
                var temp:Array = new Array("George","Tim","Alex","Dean");
                trace(temp.toString());
            }
        ]]>
    </mx:Script>

</mx:Application>

 

以上代码创建了一个应用。这个应用包含了一个 button 控件的实例 btn. 为了让这个应用中当 btn 被点击时，能够输出一串人名到控制台， btn 实例的点击事件属性与 showNames 方法建立了连接：

<mx:Button id="btn" label="Show Names" click="showNames(event)"/> 。

每当用户点击按钮， flex 框架会派发一个类型为 MouseEvent.CLICK 的事件，上面一行代码会指派 showNames 方法来响应这个事件。在 showNames 内，一个 names 数组被创建并输出到控制台。注意一个 MouseEvent 类型的事件对象被自动传递进这个事件处理器函数。基于被派发的事件，从这个对象可以得到关于这个事件本身的一些信息。在调试模式（在 Eclipse 里用 F11 ）下运行这个应用，你会在 Console 窗口看到如下的输出：

George,Tim,Alex,Dean

 

 

事件侦听器也可以用 ActionScript 指定。下面的例子用 ActionScript 指定了 showNames 和 showTitles 作为 btn 的侦听器。

 

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    creationComplete="initApp(event);">

    <mx:Button id="btn" label="Show Names"/>

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private function initApp(evt:FlexEvent):void
            {
                btn.addEventListener(MouseEvent.CLICK,showNames);
                btn.addEventListener(MouseEvent.CLICK,showTitles);
            }

            private function showNames(evt:MouseEvent):void
            {
                var temp:Array = new Array("George","Tim","Alex","Dean");
                trace(temp.toString());
            }

            private function showTitles(evt:MouseEvent):void
            {
                var temp:Array = new Array("Director","Vice-President","President",
"CEO");
                trace(temp.toString());
            }

        ]]>
    </mx:Script>

</mx:Application>

                                   

 

注意 application 的 creationComplete 事件被用来让按钮的 click 事件与两个侦听器关联： showNames 和 showTitles 。如下所示：

 

private function initApp(evt:FlexEvent):void
{
    btn.addEventListener(MouseEvent.CLICK,showNames);
                btn.addEventListener(MouseEvent.CLICK,showTitles);
}

 

 

在 debug 模式运行这个 application ，你会在 Console 窗口中得到如下输出：

George,Tim,Alex,Dean
Director,Vice-President,President,CEO

 

 

侦听器被呼叫的次序与他们被注册的次序是一样的。由于 showNames 比 showTitles 先注册，姓名队列就要比标题队列先产生。如果要改变执行次序，或者改变他们的注册次序，或者采用更好的办法，在注册他们的时候就设置他们的优先级：

private function initApp(evt:FlexEvent):void {
    btn.addEventListener(MouseEvent.CLICK,showNames,false,0);
    btn.addEventListener(MouseEvent.CLICK,showTitles,false,1);       
} 

 

在 debug 模式运行修改后的代码 , 显示如下：

Director,Vice-President,President,CEO
George,Tim,Alex,Dean

 

 

以较大的优先级数值注册的侦听器会更早被调用。如果有相同优先级数值的侦听器不止一个，执行的顺序就基于他们被注册的顺序。