Flex事件机制(一)

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

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

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

       第一种:

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

       第二种;

<s:Button label="确定">
		<s:click>
			<![CDATA[
				Alert.show("确定");
			]]>
		</s:click>
</s:Button>

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

       第三种:

<fx:Script>
		<![CDATA[
			import mx.controls.Alert;			
			protected function submitClickHandler(event:MouseEvent):void
			{
				Alert.show("确定");				
			}			
		]]>
</fx:Script>
<s:Button label="确定" click="submitClickHandler(event)" />

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

       第四种:

<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;			
			//creationComplete事件调用函数
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				submit.addEventListener(MouseEvent.CLICK, submitClickHandler);
			}			
			protected function submitClickHandler(event:MouseEvent):void
			{
				Alert.show("确定");
			}			
		]]>
</fx:Script>
<s:Button id="submit" label="确定" />

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术墨客

React中的模式对话框 转

在16.x版本之后React提供了Protals功能来解决模式对话框不在Dom根节点导致的一些BUG。除了Protal还有更多的方法去解决这些问题,本文来自Da...

503
来自专栏不止是前端

Vue:父子组件信息传递

3448
来自专栏吴裕超

实现图片懒加载

Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的...

2714
来自专栏LeoXu的博客

布局和容器 原

563
来自专栏程序员宝库

神奇的选择器 :focus-within

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

842
来自专栏Coco的专栏

神奇的选择器 `:focus-within`

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

1175
来自专栏進无尽的文章

浅汇-iOS UI布局

  iOS中UI的布局是很重要的,而在前期开发中就要选定好布局的方法,因为这对整个工程乃至于后期的版本维护都有很重要的影响。本文从比较老的Frame到新生Aut...

902
来自专栏Android开发小工

利用Android嵌套滑动机制轻松实现顶部布局置顶

传统的Android事件分发是子控件消费了事件,那么父控件就不能再处理这个事件了。也就是说一旦内部的滑动控件消费了滑动操作,外部的滑动控件就不能获取到这个滑动动...

613
来自专栏前端杂谈

性能优化之reflow和repaint

2898
来自专栏java一日一条

前端高性能滚动 scroll 及页面渲染优化

最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》(CSS揭秘)这本大作。

983

扫码关注云+社区