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 this的更多相关文章
- OpenCASCADE Expression Interpreter by Flex & Bison
OpenCASCADE Expression Interpreter by Flex & Bison eryar@163.com Abstract. OpenCASCADE provide d ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- CSS布局之div交叉排布与底部对齐--flex实现
最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...
- Flexible 弹性盒子模型之flex
实例 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟 ...
- 信息系统实践手记6-JS调用Flex的性能问题一例
说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题.笔者对其中比较典型的加以收集,描述,归纳和分享. 摘要:此文描述了笔者接触过的部分信息系统 ...
- flex自适应高度内容高度超出容器高度自动出现滚动条的问题
在容器中设置 flex-grow:2; overflow-y:auto;overflow-x:hidden;容器高度自适应. 内容高度不固定,无法出现滚动条,然后在容器中添加height:0,出现滚动 ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- flex学习小结
接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...
- flex实验总结
1.父元素 .box{ display:flex; flex-direction: column;//铺满垂直排列 flex-direction: column-reverse;//铺满垂直反向排列 ...
随机推荐
- OpenCV_1.0安装包下载
OpenCV_1.0安装包下载 点击下载
- android 使用LruCache缓存网络图片
加载图片,图片如果达到一定的上限,如果没有一种合理的机制对图片进行释放必然会引起程序的崩溃. 为了避免这种情况,我们可以使用Android中LruCache来缓存下载的图片,防止程序出现OOM. ...
- html页面分块加载
方法:jQuery ajax - load() 方法 这个方法可以请求html页面,并把结果放在指定元素内.
- ActiveX 控件和 Web 浏览器加载项
百度ActiveX的概念. 如何从零开始写一个 Chrome 扩展 360极速浏览器应用开发平台.
- hdu 1535 Invitation Cards (最短路径)
Invitation Cards Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- P1194 买礼物
题目描述 又到了一年一度的明明生日了,明明想要买B样东西,巧的是,这B样东西价格都是A元. 但是,商店老板说最近有促销活动,也就是: 如果你买了第I样东西,再买第J样,那么就可以只花K[I,J]元,更 ...
- [AGC010E] Rearranging [拓扑排序+堆]
题面 传送门 思路 首先,一个显然的结论是:Alice调整过后的序列中任意两个不互质的数的相对顺序无法改变 那么我们可以以这个性质为突破口 我们在两个不互质的权值的点之间连一条边(没错这是个图论题!! ...
- BZOJ3594 [Scoi2014]方伯伯的玉米田 【树状数组优化dp】
题目链接 BZOJ3594 题解 dp难题总是想不出来,, 首先要观察到一个很重要的性质,就是每次拔高一定是拔一段后缀 因为如果单独只拔前段的话,后面与前面的高度差距大了,不优反劣 然后很显然可以设出 ...
- 在线cron生成器
什么是cron表达式: cron表达式主要是用在Quartz框架中,Quartz是一个完全由java编写的开源作业调度框架,最主要的功能就是调度器(完成定时任务),可以与javaEE或者javaSE应 ...
- 使用jdbc连接oracle数据库时遇到的一些问题
第一个问题:驱动名称错误 错误截图如下: 从错误提示可以看出,oracle少写了一个'a',手误对程序员来说是经常发生的事,有时能够及时发现纠错,有时就容易忽略. 建议大家将写好的测试无误的保存起来, ...