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;//铺满垂直反向排列 ...
随机推荐
- Thread suspend()挂起resume()恢复
import javax.swing.*;import java.awt.*;import java.awt.event.ActionEvent;import java.awt.event.Actio ...
- Java8并行流使用注意事项
对于从事Java开发的童鞋来说,相信对于Java8的并行流并不陌生,没错,我们常常用它来执行并行任务,但是由于并行流(parallel stream)采用的是享线程池,可能会对我们的性能造成严重影响, ...
- poj 2253 Frogger (最短路径)
Frogger Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 22557 Accepted: 7339 Descript ...
- JAVA 基础开发环境 vscode 搭建 Windows下VSCode编译运行简单java
JAVA 基础开发环境 vscode 搭建 来源 https://www.cnblogs.com/freewsf/p/7744728.html 对于使用 Visual Studio Code 的 Ja ...
- BZOJ1004 [HNOI2008]Cards 【burnside定理 + 01背包】
题目链接 BZOJ1004 题解 burnside定理 在\(m\)个置换下本质不同的染色方案数,等于每种置换下不变的方案数的平均数 记\(L\)为本质不同的染色方案数,\(m\)为置换数,\(f(i ...
- webpack的css,less,sass中使用绝对路径
用法: 使用~表示绝对路径,如下: @import "~otherfile.scss" .yourClass { background: url('~img/wallpaper.p ...
- (转)Ant使用例子
文章来自:http://www.blogjava.net/feng0801/archive/2014/07/29/416297.html Ant是一个Apache基金会下的跨平台的构件工具,它可以实现 ...
- 图表绘制工具--Matplotlib 3
''' [课程3.] 表格样式创建 表格视觉样式:Dataframe.style → 返回pandas.Styler对象的属性,具有格式化和显示Dataframe的有用方法 样式创建: ① Style ...
- pdf.js如何跨域读取pdf文件?
今天,上线一个客户网站之后(使用的是广州新一代虚拟空间)发现在读取上传的pdf文件的时候读取错误,通过直接在浏览器输入文件地址的时候发现文件地址被重定向了(呵呵!),结果就是pdf文件源由本地直接变成 ...
- [leetcode]Convert Sorted Array to Binary Search Tre
排好序的... 中间是root , root左边是left,root右边是right 递归建树. /** * Definition for binary tree * struct TreeNode ...