Flex this

简介:

为了便于对比和叙述,我们先上一段最简单的js+html代码:
<input type="button" value="test" id="htmBtn" onclick="alert(this.id)">
用惯js+html的程序员都知道,这里的this指向触发事件的html组件本身,所以this.id将如愿显示为”htmBtn”。

但是在flex3中,你写事件侦听函数时,this关键字将指向application,而不再指向触发事件本身的组件上了(与js+html完全不同):

例如:

<mx:ComboBox name="ttt"  change="Alert.show('you have change the data!'+this.selectedLabel)">
<mx:dataProvider>
<mx:String>Dogs</mx:String>
<mx:String>Cats</mx:String>
<mx:String>Mice</mx:String>
</mx:dataProvider>
</mx:ComboBox>

中的this.selectedLabel将找不到任何东东。因为this并没有指向这个combobox!!!

那么怎么找到触发事件的组件呢?flex提供了event.currentTarget来指定触发事件的当前组件,如下方式:

 

<mx:ComboBox name="ttt"  change="Alert.show('you have change the data!'+event.currentTarget.selectedLabel)">
<mx:dataProvider>
<mx:String>Dogs</mx:String>
<mx:String>Cats</mx:String>
<mx:String>Mice</mx:String>
</mx:dataProvider>
</mx:ComboBox> 
或者:<mx:Script><![CDATA[
private function changeEvt(e:Event):void {
Alert.show('you have change the data!'+e.currentTarget.selectedLabel)"
}
]]></mx:Script>

<mx:ComboBox name="ttt"  change="changeEvt(event)"><mx:dataProvider>
<mx:String>Dogs</mx:String>
<mx:String>Cats</mx:String>
<mx:String>Mice</mx:String>
</mx:dataProvider>
</mx:ComboBox>


官方文档还提出了特别说明,使用event.currentTarget时有一个好习惯可以参考,即,最好先指定好该组件的类型,例如 TextInput(e.currentTarget),这样做的目的是防止由于该组件某个属性不存在时,编译时不报错而运行时才报错,看代码就明白了:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[

import mx.core.UIComponent;

private function tiHandler(e:Event):void {

/* 
这段代码将会在运行时报错,而编译时不报错。因为TextInput根本没有tmesis属性
e.currentTarget.tmesis = 4;
*/

/*
这段代码的用法,就能在编译时便发现错误,不用等到运行时才报错
TextInput(e.currentTarget).tmesis = 4;
*/

}

]]></mx:Script>

<mx:TextInput id="ti1" click="tiHandler(event)"

text="This is some text. When you click on this control, the first three characters

are selected."/>

</mx:Application>

分类: Flex


本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/3437771.html,如需转载请自行联系原作者

相关文章
|
6月前
|
搜索推荐
什么是 Pledge to Flex
什么是 Pledge to Flex
34 0
|
8月前
|
JavaScript 容器
什么是Flex
1:屏幕和浏览器窗口大小发生改变也可以灵活调整布局; 2:可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小; 3:可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 4:可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围; 5:可以控制元素在页面上的布局方向; 6:可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
91 0
|
前端开发
CSS - Flex属性 - flex-grow / flex-shrink / flex-basis(上)
CSS - Flex属性 - flex-grow / flex-shrink / flex-basis(上)
81 0
CSS - Flex属性 - flex-grow / flex-shrink / flex-basis(上)
|
前端开发
CSS - Flex属性 - flex-grow / flex-shrink / flex-basis(下)
CSS - Flex属性 - flex-grow / flex-shrink / flex-basis(下)
93 0
|
前端开发 容器
flex从总结到了解
flex 是一种布局方式,在 CSS3 之后开始有。它主要由父容器和子项组成
157 1
flex从总结到了解
flex水平垂直居中
我是通过flex的水平垂直居中噢! html,body{ width: 100%; height: 200px; } .parent { display:flex; align-items: center;/*垂直居中*/ justify-...
1073 0
|
JavaScript Java 前端开发
flex实现股票行情走势图
原文 http://blog.csdn.net/shenjiancomputer/article/details/8051873 第一步: jsp:1 [html] view plaincopyprint?           import flash.
951 0