Flex 事件机制

使用ActionScript的单击事件示例

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

               xmlns:s="library://ns.adobe.com/flex/spark" 

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" applicationComplete="init()">

    <fx:Script>

        <![CDATA[          

            import mx.controls.Alert;

            protected function init():void

            {

                test3.addEventListener(MouseEvent.CLICK,onClick)

            }

            protected function onClick(event:Event):void

            {

                Alert.show(event.target.label+"clicked","时间测试");

            }

        ]]>

    </fx:Script>

    <fx:Declarations>

        <!-- 将非可视元素（例如服务、值对象）放在此处 -->

    </fx:Declarations>

    <s:Button     id="test3" x="493" y="62" width="112" height="44" label="按钮"/>

</s:Application>

绑定事件

无论何时创建对某个变量的绑定，都会注册一个事件监听器，监听器会在变量被修改时做出响应。

ActionScript依赖ChangeWatcher类实现数据绑定

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

               xmlns:s="library://ns.adobe.com/flex/spark" 

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"

               applicationComplete="init()">

    <fx:Script>

        <![CDATA[

            import mx.binding.utils.ChangeWatcher;

            import mx.events.FlexEvent;

            import mx.events.PropertyChangeEvent;

            

            protected var _watcher:ChangeWatcher;

            

            protected function init():void

            {

                toggleWatch();

            }

            protected function toggleWatch():void

            {

                if(_watcher&&_watcher.isWatching())//确定监视器活跃

                {

                    _watcher.unwatch();//移除监视器的变量

                    test3.label="Watch";

                }

                else

                {

                _watcher=ChangeWatcher.watch(input,"text",onChange);

                test3.label="Stop Watching！";

                }

            }

            protected function onChange(event:Event):void

            {

                label1.text=input.text;

            }

            

        ]]>

    </fx:Script>

    <s:Button     id="test3" x="338" y="176" width="112"

                  height="44" label="Watch Text" click="toggleWatch()"/>

    <s:Label id="label1" x="510" y="176" width="176" height="53" />    

    <s:TextInput id="input" x="510" y="239" width="176" height="53" text="start text"/>

</s:Application>

 

我们刚刚看到的是unwatch()方法的用法，该方法可以取消监视变量的行为。在使用事件监听器的情况下，同样可以做到这一点。如果事件监听器是在运行时通过ActionScript添加的，就可以使用removeEventListener()方法移除。Unwatch()方法只是使用removeEventListener停止事件的分派。

看如何移除事件监听器：

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

               xmlns:s="library://ns.adobe.com/flex/spark" 

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <s:layout>

        <s:VerticalLayout/>

    </s:layout>

    <fx:Script>

        <![CDATA[

            import mx.events.DragEvent;

            protected function toggleListener():void

            {

               if(box.hasEventListener(MouseEvent.CLICK))

               {

                 log("Listeners removeed");

                 //移除事件侦听器

                 box.removeEventListener(MouseEvent.MOUSE_OVER,onEvent);

                 box.removeEventListener(MouseEvent.MOUSE_OUT,onEvent);

                 box.removeEventListener(MouseEvent.MOUSE_MOVE,onEvent);

                 box.removeEventListener(MouseEvent.CLICK,onEvent);      

               }

              else

              {

                log("Listeners added")

                //添加事件侦听器

                box.addEventListener(MouseEvent.CLICK,onEvent);

                box.addEventListener(MouseEvent.MOUSE_MOVE,onEvent);

                box.addEventListener(MouseEvent.MOUSE_OUT,onEvent);

                box.addEventListener(MouseEvent.MOUSE_OVER,onEvent);

              }

           }

          protected function log(text:String):void//添加新的String用于显示

          {

              logField.text=text+"\n"+logField.text;  

          }

         protected function onEvent(event:Event):void

          {

              log("Event triggered:"+event.type);

          }

            

        ]]>

    </fx:Script>

    <s:Button label="Toggle Listener" click=" toggleListener()"/>

    <s:Group id="box">

        <s:Rect width="200" height="50">

            <s:fill>

                <s:SolidColor color="0x979797"/>

            </s:fill>

        </s:Rect>

    </s:Group>

    <s:TextArea id="logField" width="400" height="400"/>

</s:Application>