Flex中的自定义事件[备忘]

面向对象语言中对象的三个要素：属性、方法和事件，其实最关键的就是事件，“事件驱动”机制使得两个对象之间能够互相沟通，并且是以一种松散耦合的方式。直接绑定的方式固然方便，但对对象的耦合较为紧密，无法适应多变的情况和“黑箱”原则。

FLEX中给组件定义自定义事件的方法同样简单，如果有点C#的事件与委托的概念，几分钟就能搞清楚FLEX的自定义事件问题。

首先当然是定义自定义事件类型，由于事件的基类是Event，因此自定义的事件需要从该类中继承：

package
{
    import flash.events.Event;
    public class SearchEvent extends Event
    {
        // 新添加的一个参数
        public var searchText:String;
        public function SearchEvent(type:String,searchText:String){
            super(type);
            this.searchText = searchText;
        }
        override public function clone():Event{
            return new SearchEvent(type,searchText);
        }
    }
}

在上面的类SearchEvent中，我们新添加了一个searchText属性，这样就能在使用该事件时传递该参数。

接下来我们创建一个自定义组件，它由一个InputText和一个Button组成，我们希望在Button按下时，能够触发一个search事件，即该组件拥有一个自定义事件search：

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="236" height="38">
    <mx:Metadata>
        [Event(name="search",type="SearchEvent")]
    </mx:Metadata>
    <mx:Script>
        <![CDATA[
            private function clickHandler(event:MouseEvent):void{
                //新建search对象
                var searchObj:SearchEvent=new SearchEvent("search",searchText.text);
                //事件分发
                dispatchEvent(searchObj);
            }
        ]]>
    </mx:Script>
    <mx:TextInput x="10" y="10" id="searchText"/>
    <mx:Button x="178" y="10" label="搜索" click="clickHandler(event)"/>
</mx:Canvas>

我们可以看到，当Button按下时，它将执行clickHandler函数，而该函数中将新建一个SearchEvent对象，并使用dispatchEvent函数进行事件分发，这样，该自定义组件就能够拥有search事件。

我们现在来调用该组件：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="connection.*">
    <mx:Script>
        <![CDATA[
            private function showGrid(event:SearchEvent):void
            {
                panel.title = event.searchText;
            }
        ]]>
    </mx:Script>
    <ns1:Search x="77" y="49" search="showGrid(event)">
    </ns1:Search>
    <mx:Panel x="194" y="125" width="250" height="200" layout="absolute" id="panel">
    </mx:Panel>
</mx:Application>

非常简单，我们可以看到<ns1:Search>这个组件已经拥有了一个search事件。

Related Items

• Flex中HTTPService对象的e4x和ArrayCollection两种数据处理（备忘）