理解Flash中的事件机制

--->点击阅读更多    

上次测试中当我们点击“发送”按钮时，flex就会与后台中定义的Java方法交互并将结果返回给flex并呈现在前台页面，其实这靠的就是事件。事件贯穿在Flex中的所有过程中，如果没有事件，那么就谈不上什么人机交互。

        Flash的ActionScript语言支持事件编程。在ActionScript中，每个事件都由一个事件对象表示。事件对象是flash.events.Event类或其某个子类的实例。事件对象不但存贮有关特定事件的信息，还包含便于操作事件对象的方法。事件对象有如下两个用途：

        ●事件对象通过将特定事件的信息存贮在一组属性中来代表实际事件。

        ●事件对象包含一组方法，可用于操作事件对象和影响事件处理系统的行为。

        创建事件对象后，就可以通过ActionScript的API方法派发（dispatch）该事件对象。所谓的“派发”就是将该事件对象按照一定规则顺序地传递给其他对象并执行这些对象上注册的事件侦听器.

        这些能够收听到该事件的对象被称之为事件的目标（target）对象。我们可以编写事件侦听器对传递到目标对象上的事件进行处理。

        事件侦听器是我们自己编写的，用于响应特定事件的函数和方法。事件侦听器可以是目标对象的函数和方法，也可以是其他对象上的函数和方法。但事件侦听器必须在目标对象上注册才能对传递给目标对象上的事件进行处理。

为了更好的理解Flash中的事件机制，我们通过一个小例子来看看事件是怎么进行的！

 

       1.     创建自定义事件类

      在ActionScript中，自定义的事件类必须继承flash.events.Event类，下面是一个自定义的事件类TestEvent，代码如下所示:

[html] view plain copy print ?

1. package com.flex.ases  
2. {  
3.     import flash.events.Event;  
4.      
5.     public class TestEvent extends Event  
6.     {  
7.        public static const TEST_EVENT:String="TEST_EVENT";  
8.        public var data:Object;  
9.        public function TestEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)  
10.        {  
11.            super(type, bubbles,cancelable);  
12.        }  
13.     }  
14. }  

       这个类自定义了一个事件类型“TEST_EVENT”，而data则用于存贮事件信息。而TestEvent类的构造函数必须提供如上所示的3个参数，这么做是为了父类的构造函数提供所需的函数：

       ●type：表示事件类型的一个字符串。他不仅表示具体事件对象的含义，而且事件侦听器也是根据事件的类型对事件进行侦听。事件类型的字符串一般都是用静态变量定义的，即用const关键字修饰。

        ●bubbles:表示事件是否“冒泡”。这个以后会学习到。

       ●cancelable:表示事件调度过程中，目标对象上对事件的默认处理是否可以取消。这个稍后也会仔细分析的。

 

       2.     创建事件适配器

       在ActionScript中，只有flash.events.EventDispatcher类及其子类的实例才能派发事件。派发事件的方法则是以要被派发的事件对象作为参数来调用EventDispatch类或其子类实例的dispatchEvent()方法。

        在ActionScript中，只有flash.events.EventDispatcher类及其子类的实例才可以成为事件的目标对象，因为只有flash.events.EventDispatcher类及其子类的实例才可以注册事件侦听器，从而决定怎么处理达到该目标对象上的事件。

       下面代码中创建了一个TestEventDispatch类并继承了EventDispatcher类，代码如下所示：

[html] view plain copy print ?

1. package com.flex.ases  
2. {  
3.     import flash.events.Event;  
4.     import flash.events.EventDispatcher;  
5.     import flash.events.IEventDispatcher;  
6.      
7.     import mx.controls.Alert;  
8.      
9.     public class TestEventDispatch extends EventDispatcher  
10.     {  
11.        public functionTestEventDispatch(target:IEventDispatcher=null)  
12.        {  
13.            super(target);  
14.            this.addEventListener(TestEvent.TEST_EVENT,testEventMethod);  
15.        }  
16.         
17.        protected function testEventMethod(event:TestEvent):void  
18.        {  
19.            // TODOAuto-generated method stub  
20.            Alert.show(event.data as String,"提示");  
21.        }  
22.        public function createTestEvent():void{  
23.            var testEvent:TestEvent=new TestEvent(TestEvent.TEST_EVENT);  
24.            testEvent.data="你已经触发自定义事件！";  
25.            this.dispatchEvent(testEvent);  
26.        }  
27.         
28.     }  
29. }  

         通过上面这段代码我们可以看出，TestEventDispatch类中createTestEvent方法中创建了一个TestEvent事件的实例，并指定此事件的类型为TEST_EVENT,并给此事件实例添加了一条信息。然后我们把此实例作为派发事件的参数进行派发事件。

         我们在此类的构造函数中添加事件侦听器，并用testEventMethod作为TEST_EVENT事件类型的处理方法。

         3.     测试

         现在开始调用此事件，代码如下所示：

[html] view plain copy print ?

1. <?xmlversionxmlversion="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
3.               xmlns:s="library://ns.adobe.com/flex/spark"  
4.               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">  
5.      
6.     <fx:Script>  
7.        <![CDATA[ 
8.            import com.flex.ases.TestEvent; 
9.            import com.flex.ases.TestEventDispatch; 
10.            protected function test_clickHandler():void 
11.            { 
12.               // TODOAuto-generated method stub 
13.               var testEventDispatch:TestEventDispatch=newTestEventDispatch(); 
14.               testEventDispatch.createTestEvent(); 
15.               
16.            } 
17.        ]]>  
18.     </fx:Script>  
19.      
20.     <fx:Declarations>  
21.        <!-- Place non-visualelements (e.g., services, value objects) here -->  
22.     </fx:Declarations>  
23.     <s:Label x="34"y="97"fontSize="19" text="点击按钮触发自定义事件："/>  
24.     <s:Button id="test" x="284" y="87" height="28" label="触发" click="test_clickHandler()"  
25.              fontSize="18"/>  
26. </s:Application>  

 

       运行此页面，如下所示：

       点击“触发”按钮，则会调用自定义的TestEvent事件，页面如下所示：

       好了，经过这么一学习，现在对flash的事件机制有了一个质地的理解。

--->点击阅读更多