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>