Flex 事件机制

zb27 贡献于2014-04-28

作者 zb  创建于2011-09-13 03:13:00   修改者zhangbo  修改于2013-05-11 08:31:00字数4480

文档摘要:Flex事件贯穿我们整个开发,事件分为两类,用户事件和系统事件,比如说我们在页面点击了一个按钮,这是用户触发的事件,当组件初始化完毕,会触发creationComplete事件,这是系统事件。简单的说,用户事件是人触发的,系统事件是flex自身触发的。
关键词:

Flex事件贯穿我们整个开发,事件分为两类,用户事件和系统事件,比如说我们在页面点击了一个按钮,这是用户触发的事件,当组件初始化完毕,会触发creationComplete事件,这是系统事件。简单的说,用户事件是人触发的,系统事件是flex自身触发的。        事件的传播分为三个阶段,捕获(Capturing)、定标(Targeting)、冒泡(Bubbling),捕获:为事件监听器检查目标对象之前,应用程序将首先为监听器检查所有这一阶段所注册的父容器和祖先容器,定标:应用程序会为目标对象上的监听器进行检查,冒泡:定标之后,应用程序将为监听器检查所有这一阶段所注册的父容器和祖先容器,冒泡是捕获的相反阶段。这三个阶段中,我们要记住两个对象,target和currentTarget,简单的将,target是引发事件的源对象,currentTarget是监听这个事件的对象。通常来说,target和currentTarget是相同的,比如说我们创建了一个按钮,并在按钮上监听了click事件,但是如果不是在按钮上监听了click事件,而是在它的父容器上监听了这个事件,这时target和currentTarget就不同了。        说了这些只是我对Flex事件的浅显理解,无论是否做flex开发的朋友看过来都能够对flex开发有一个直观的认识,下面就一个按钮,介绍一下flex中监听事件的四种方式。        第一种: [javascript] view plaincopyprint? 1.           第二种; [javascript] view plaincopyprint? 1.    2.            3.                6.            7.           这种方式称之为内联,这种方式在flex中被支持的很好,在使用项目渲染器和项目编辑器的时候也可以这种方式使用。不过这种方式个人不推崇,逻辑比较混乱。        第三种: [javascript] view plaincopyprint? 1.    2.            9.    10.           这种方式比较常见,event参数是flex内部帮我们传递的。        第四种: [javascript] view plaincopyprint? 1.    2.            15.    16.           这种方式常用于动态创建组件或者分离方式构建自定义组件的时候使用。        在实际开发中,我们常用的方式就是第三种和第四种。 在Flex开发中,很多时候需要在父子组件之间传递数据,通过事件可以实现数据的传递,现在写一个简单的例子,在一个Flex应用中有一个TextArea,并且引入了一个自定义组件,自定义组件中有一个Button,点击这个Button,传递一个字符串在TextArea中显示。详细过程如下:        1. 创建主应用文件和自定以组件。        EventTest.mxml [html] view plaincopyprint? 1.    2.    7.        8.            9.        10.        11.        12.           components/component1.mxml [html] view plaincopyprint? 1.    2.    5.        6.           2. 点击子组件的按钮会抛出一个事件,这个事件可以被主应用捕捉到并进行处理,显然这个事件需要我们自定义。        events/MyEvent.as,在实际开发中,并不推荐以My起头作为类名,这里只是用于测试。 [javascript] view plaincopyprint? 1. package events   2. {   3.     import flash.events.Event;     4.     /**  5.      * 自定义事件  6.      * @author gaoshuang  7.      */   8.     public class MyEvent extends Event   9.     {   10.         /**  11.          * 显示信息  12.          * @default   13.          */   14.         public static const SHOWINFO:String = "showInfo";          15.         /**  16.          * 存储数据  17.          * @default   18.          */   19.         public var data:*;         20.         /**  21.          *   22.          * @param type 事件类型  23.          * @param bubbles 事件是否可以冒泡,true为可以,false为不可以  24.          * @param cancelable 事件是否可以取消,true为可以,false为不可以  25.          */   26.         public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)   27.         {   28.             super(type, bubbles, cancelable);   29.         }   30.     }   31. }   package events { import flash.events.Event; /** * 自定义事件 * @author gaoshuang */ public class MyEvent extends Event { /** * 显示信息 * @default */ public static const SHOWINFO:String = "showInfo"; /** * 存储数据 * @default */ public var data:*; /** * * @param type 事件类型 * @param bubbles 事件是否可以冒泡,true为可以,false为不可以 * @param cancelable 事件是否可以取消,true为可以,false为不可以 */ public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false) { super(type, bubbles, cancelable); } } }        Flex中声明常量使用const,并且不需要var关键字,final用于声明方法和类,详情请查看Flex API,在实际开发中,可以把自定义事件按功能类别来划分,就像Flex中包含的那些事件一样。        3. 在自定义组件中将事件抛出,在components/component1.mxml中加入如下代码。 [html] view plaincopyprint? 1.    2.      12.    13.    14.   [Event(name="showInfo", type="events.MyEvent")]   15.        [Event(name="showInfo", type="events.MyEvent")]        这里在metadata标签下声明了showInfo事件,这样,在主应用中引入的自定义组件中就会有showInfo事件属性。        4. 在主应用中捕获事件,并处理,EventTest.mxml改变成如下代码。 [html] view plaincopyprint? 1.    2.    7.        8.            15.        16.        17.            18.        19.        20.        21.           这里要说明一下,有两种处理方式,第一种就是这样,在子组件的metadata标签中声明了showInfo事件,如果没有声明,就找不到showInfo属性了,只能通过component.addEventListener(MyEvent.SHOWINFO, componentShowInfoHandler);这种方式来处理。

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 2 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档