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,如需转载请自行联系原作者

相关文章
|
JavaScript 容器
什么是Flex
1:屏幕和浏览器窗口大小发生改变也可以灵活调整布局; 2:可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小; 3:可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 4:可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围; 5:可以控制元素在页面上的布局方向; 6:可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
130 0
|
前端开发 容器
flex从总结到了解
flex 是一种布局方式,在 CSS3 之后开始有。它主要由父容器和子项组成
199 1
flex从总结到了解
|
内存技术 开发工具 数据可视化
flex水平垂直居中
我是通过flex的水平垂直居中噢! html,body{ width: 100%; height: 200px; } .parent { display:flex; align-items: center;/*垂直居中*/ justify-...
1107 0
|
Web App开发 JavaScript Java
flex学习
早就想弄个flex的东西了...总是没有心情弄..有的时候项目让人心力憔悴...   最近,,想着是破罐子破摔..弄点别的东西...换个心情..然后在去弄下项目...(已经快接近尾声了)   总是在开发的第一线..技术上面什么都弄..公司里面还要应付其他同事的问题...   能帮助别人就帮助吧..本人也没有别的什么有点..就代码上面略有研究.(投入的时间多了自然就有所领悟了)   1,先弄个s
1315 0
|
XML Java 数据格式
Flex 4 advancedDataGrid的使用
参考 http://www.cnblogs.com/xuehai/archive/2009/09/26/1574531.html                                                                                     ...
1420 0
Flex学习笔记(Day 2)
LineChart ViewStack控件 //一种方法 var url:String; url = "http://www.
710 0