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;//铺满垂直反向排列 ...
随机推荐
- LACP学习笔记
LACP学习笔记 来源: https://blog.csdn.net/zhengmx100/article/details/53893902 参考文档:download.h3c.com.cn/down ...
- background-size属性的几个实用的值
先来看w3c的background-size的几个值: background-size:cover; 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域.背景图像的某些部分也许无法显示在背景定 ...
- xpath属性值的模糊匹配
得至:http://bbs.csdn.net/topics/390857942 最后一楼 //div[contains(@class,'Number Skill')]
- BZOJ1296 [SCOI2009]粉刷匠 【dp】
题目 windy有 N 条木板需要被粉刷. 每条木板被分为 M 个格子. 每个格子要被刷成红色或蓝色. windy每次粉刷,只能选择一条木板上一段连续的格子,然后涂上一种颜色. 每个格子最多只能被粉刷 ...
- 禅与园林艺术(garden)
禅与园林艺术(garden) 上了大学之后,小W和小Z一起报了一门水课,在做作业时遇到了问题. 有一个长度为nn的数列{ai},为一列树木的美观值. 现在有mm次询问,每次给出三个数l,r,p 询问对 ...
- forEach循环dom元素
//让ie8支持foreach if (typeof Array.prototype.forEach != 'function') { Array.prototype.forEach = functi ...
- [03]使用阿里RAP搭建前端Mock Server
MockServer可以减少前端开发对后端的依赖,提高前端开发的效率,同时也利于团队的协作. 什么是RAP? RAP是阿里团队出的一款WEB接口管理工具,帮助开发人员更高效的管理接口文档,同时通过分析 ...
- noip 2010 三国游戏
三国游戏 三国游戏 描述 小涵很喜欢电脑游戏,这些天他正在玩一个叫做<三国>的游戏. 在游戏中,小涵和计算机各执一方,组建各自的军队进行对战.游戏中共有N 位武将(N为偶数且不小于4),任 ...
- 原生dialog
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js querySelector与getElementById
querySelector不能取到id以数字开头的元素,据说是遵循css规范.而document.getElementById是可以的.