1.6节. 在MXML中添加事件监听器

 

1.6节. 在MXML中添加事件监听器

1.6.1. 问题

我想在MXML中添加事件监听器来监听MXML文件中的子对象所发出的事件。

1.6.2. 解决办法

传递一个方法名给组件的event标签并发送一个event对象（可选）。

1.6.3. 讨论

当一个行为发生时，Flex组件便会发出相应事件信号，比如用户点击一个按钮， 选择列表框的某一项或者数据读取。要监听这些被广播出去的事件，最简单的方法就是添加一个函数引用，该函数将处理这个事件，例如：

Code View:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"> 

    <mx:Script> 

        <![CDATA[ 

            private function buttonClick():void 

            { 

                trace(" Button has been clicked "); 

            } 

        ]]> 

    </mx:Script> 

    <mx:Button click="buttonClick()" label="Click Me"/> 

</mx:Canvas>  

添加click="buttonClick()"，当按钮发出click事件时将调用buttonClick函数。

你还可以传递事件对象本身给这个函数，每次组件发出该事件时，组件也会发送Event类型的对象给监听它的处理函数，例如：

Code View:

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"> 

    <mx:Script> 

        <![CDATA[ 

            private function buttonClick(event:Event):void 

            { 

                trace(event.target.id); 

                if(event.target.id == "buttonOne") 

                { 

                    trace(" button one was clicked") 

} 

                else 

                { 

                    trace(" button two was clicked") 

} 

            } 

        ]]> 

    </mx:Script> 

    <mx:Button click="buttonClick(event)" 

label="Click Me One" id="buttonOne"/> 

    <mx:Button click="buttonClick(event)" label="Click Me Two"  id="buttonTwo"/> 

</mx:HBox>  

通过事件侦听器以侦听的Event类型的对象，给事件侦听器发送该事件并以不同的方式反馈，具体取决于指定的条件。 在此示例中，响应该事件取决于事件来源。

Flex中的事件对象以及事件发送系统是一个非常重要的内容。 所有事件都包含一个正在侦听该事件时所使用的类型，如果该事件是click事件，那么子对象的click事件就会加入事件监听方法：

<mx:Button click="trace('I was clicked')"/>

用户交互的通知，应用程序发送消息或定时发送给服务器，事件对象定义了一些任何监听函数都可以访问的属性，如下所示：

bubbles

指示事件是否是冒泡事件，即是否从已接收任何侦听器进一步沿事件链向上重新发送该事件对象。

cancelable

指示该事件是否是可取消的。

currentTarget

处于活动进程的事件对象。

eventPhase

事件流的当前阶段

Target

事件目标，即发出该事件的对象

Type

事件类型

你也可以在MXML中通过绑定标签{}直接写入事件处理语句。

Code View:

    <mx:Button click="{textComponent.text = 'You clicked the  button'" label="Click Me"/> 

    <mx:Text id="textComponent"/>        

当编译这段代码时，编译器会创建一个函数，设置textComponent.text = 'You clicked the button' 作为函数体的内容。这种写法看起来不一样，但是其结果都是一样的：监听事件并执行代码。这种方法本身并没有错误，但是如果处理的是复杂的事情而非简单的设置一个属性，定义一个函数会使你的代码看起来清晰的多，且更易于阅读和理解。