Flex事件机制

绝地灬酷狼 2022-08-14 00:55 189阅读 0赞

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

事件的传播分为三个阶段，捕获(Capturing)、定标(Targeting)、冒泡(Bubbling)，捕获：为事件监听器检查目标对象之前，应用程序将首先为监听器检查所有这一阶段所注册的父容器和祖先容器，定标：应用程序会为目标对象上的监听器进行检查，冒泡：定标之后，应用程序将为监听器检查所有这一阶段所注册的父容器和祖先容器，冒泡是捕获的相反阶段。这三个阶段中，我们要记住两个对象，target和currentTarget，简单的将，target是引发事件的源对象，currentTarget是监听这个事件的对象。通常来说，target和currentTarget是相同的，比如说我们创建了一个按钮，并在按钮上监听了click事件，但是如果不是在按钮上监听了click事件，而是在它的父容器上监听了这个事件，这时target和currentTarget就不同了。

说了这些只是我对Flex事件的浅显理解，无论是否做flex开发的朋友看过来都能够对flex开发有一个直观的认识，下面就一个按钮，介绍一下flex中监听事件的四种方式。

第一种：

**\[javascript\]**  [view plain][] [copy][view plain]

1.  <s:Button label="确定" click="Alert.show('确定')" />

第二种;

**\[javascript\]**  [view plain][] [copy][view plain]

1.  <s:Button label="确定">  
2.          <s:click>  
3.              <!\[CDATA\[  
4.                  Alert.show("确定");  
5.              \]\]>  
6.          </s:click>  
7.  </s:Button>

这种方式称之为内联，这种方式在flex中被支持的很好，在使用项目渲染器和项目编辑器的时候也可以这种方式使用。不过这种方式个人不推崇，逻辑比较混乱。

第三种：

**\[javascript\]**  [view plain][] [copy][view plain]

1.  <fx:Script>  
2.          <!\[CDATA\[  
3.              **import** mx.controls.Alert;             
4.              **protected** **function** submitClickHandler(event:MouseEvent):**void**  
5.              \{  
6.                  Alert.show("确定");                 
7.              \}             
8.          \]\]>  
9.  </fx:Script>  
10. <s:Button label="确定" click="submitClickHandler(event)" />

这种方式比较常见，event参数是flex内部帮我们传递的。

第四种：

**\[javascript\]**  [view plain][] [copy][view plain]

1.  <fx:Script>  
2.          <!\[CDATA\[  
3.              **import** mx.controls.Alert;  
4.              **import** mx.events.FlexEvent;           
5.              //creationComplete事件调用函数  
6.              **protected** **function** creationCompleteHandler(event:FlexEvent):**void**  
7.              \{  
8.                  submit.addEventListener(MouseEvent.CLICK, submitClickHandler);  
9.              \}             
10.             **protected** **function** submitClickHandler(event:MouseEvent):**void**  
11.             \{  
12.                 Alert.show("确定");  
13.             \}             
14.         \]\]>  
15. </fx:Script>  
16. <s:Button id="submit" label="确定" />

这种方式常用于动态创建组件或者分离方式构建自定义组件的时候使用。

在实际开发中，我们常用的方式就是第三种和第四种。到此，内容结束，下一节讲的主要内容是使用事件在父子组件中传输数据。

ps：我的博客刚刚开始写，如果大家对我的博客形式和博文内容有什么建议的话，欢迎提出，下篇 [《Flex事件机制(二)》][Flex].，敬请关注。

本文来自： [高爽|Coder][Coder]，原文地址： [http://blog.csdn.net/ghsau/article/details/7390827][http_blog.csdn.net_ghsau_article_details_7390827]。

[view plain]: http://blog.csdn.net/ghsau/article/details/7390827#
[Flex]: http://blog.csdn.net/ghsau/article/details/7392188
[Coder]: http://blog.csdn.net/ghsau
[http_blog.csdn.net_ghsau_article_details_7390827]: http://blog.csdn.net/ghsau/article/details/7390827