Flex 3 在MXML中添加事件监听器

关键字: flex 3 cookbook

1.6.1 问题
你需要在MXML文件中添加将监听MXML文件中分派给子节点的一些事件的事件监听器.

1.6.2 解决办法
通过给组件的事件标签提供一个方法名,可以选择是否使用事件对象.

1.6.3 讨论
每当一个动作发生,Flex组件都会触发一个事件,例如用户单击一个按钮,改变组合框中被选择的项,或是加载数据.要监听这些事件广播,只需添加一个将处理这个事件的方法的引用.例如:

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

 <mx:Script>
 <![CDATA[

privatefunctionbuttonClick():void
{
trace("Buttonhasbeenclicked");
}

]]>
 </mx:Script>

 <mx:Buttonclick="buttonClick()"label="ClickMe"/>
 </mx:Canvas>

<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()"只要按钮发生单击事件,就会调用buttonClick方法.

你也可以将事件对象本身传递给方法.每当组件触发一个事件,这个组件都会发送一个Event类型的对象,所有事件监听对象都可以接受.例如:

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

 <mx:Script>
 <![CDATA[

privatefunctionbuttonClick(event:Event):void
{
trace(event.target.id);
if(event.target.id=="buttonOne")
{
trace("buttononewasclicked")
}
else
{
trace("buttontwowasclicked")
}
}

]]>
 </mx:Script>

 <mx:Buttonclick="buttonClick(event)"
 label="ClickMeOne"id="buttonOne"/>
 <mx:Buttonclick="buttonClick(event)"label="ClickMeTwo"id="buttonTwo"/>
 </mx:HBox>

<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>

通过告诉事件监听器去监听一个类型事件的对象,你可以将事件发送给事件监听器,之后根据指定的标准用不同的方式返回给事件一个响应.在这个例子中,响应则依赖于事件在哪里引发.

在Flex中事件对象和事件分派系统是需要重点来理解的.当事件被监听时,所有的事件都包含一个使用的类型;如果是单击类型的事件,之后事件监听方法将被添加到子元素的单击事件中:

<mx:Buttonclick="trace('Iwasclicked')"/>

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

用户交互的通知,从服务器发送给应用的消息,或是通过事件发送定时器.事件对象定义了几个你可以在所有监听方法中访问的属性.如下所是:

bubbles
标识出一个事件是否是冒泡事件,更准确的说,它是否将从接收到事件的对象再次向上面的事件链传递.

cancelable
标识出事件触发的行为是否可以被阻止.

currentTarget
使用事件监听器有效的处理事件对象的对象.

eventPhase
事件流的当前阶段.

Target
事件目标,触发事件的那个对象.

Type
事件的类型.

你也可以在MXML中书写事件处理器,通过使用绑定标签{}指示出当事件被触发时需要执行花括号中的代码.例如:

<mx:Buttonclick="{textComponent.text='Youclickedthebutton'}"label="ClickMe"/>
 <mx:Textid="textComponent"/>

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

在它编译代码的时候,Flex编译器将创建一个方法,之后将textComponent.text = 'You clicked the button'做为方法的主体.它可能看起来不同于前面的方法,但是这个方法的结果确是相同的:它监听这个事件,并执行它的代码.这种方法没有什么本质上的错误,但是相比设置一个属性来说还是相当复杂的,使用一个已定义的方法让你的代码更加容易阅读和理解.