声明:关于我写的flex的东东,有不少内容是在阅读了“Flex 3 CookBook 简体中文”之后,自己觉得很重要的,就贴了出来,以免自己忘记。
在文章里,我只是加入了自己的粗浅理解,没有用于任何商业用途。
监听键盘事件
现来看看代码:
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400" height="300" backgroundColor="#8C2E2E" keyDown="keyHandler(event)" >
<fx:Script>
<![CDATA[
import flash.events.KeyboardEvent;
import mx.controls.Alert;
import mx.events.FlexEvent;
private function keyHandler(event:KeyboardEvent):void{
trace ("event.keyCode="+event.keyCode);
switch(event.keyCode){
case 13:
trace("Enter pressed");
break;
case 32:
trace("Space Bar pressed");
break;
case 16:
trace("Shift Key pressed");
break;
case 112:
trace("F1 pressed");
break;
case 8:
trace("Delete pressed");
break;
}
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<mx:Button id="bt" label="one" />
</s:BorderContainer>
运行的效果截图:
在这里要注意几点:
- 当浏览器加载成功后,鼠标首先点击红色区域,此时敲击键盘任何按键,keyHandler()是都不会响应的。
- 红色区域是BorderContainer区域,鼠标首先点击红色区域,是为了让焦点落在红色区域。
- 但是BorderContainer区域,默认的情况下,是不会响应KeyboardEvent事件,
- 需要使用其中一个button去激活,当焦点落在button上,那么button就激活了BorderContainer的响应KeyboardEvent事件。
- 如果,button被删除了,那么就没有东西去激活了,keyHandler()永远不会被调用。
- 如果想让BorderContainer区域,默认的情况下,就会响应KeyboardEvent事件,而不管有没有组件去激活它,请看如下代码,实现:
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400" height="300" backgroundColor="#8C2E2E" keyDown="keyHandler(event)"
addedToStage="addedToStageHandler(event)"
>
<fx:Script>
<![CDATA[
import flash.events.KeyboardEvent;
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function addedToStageHandler(event:Event):void
{
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandler);
}
private function keyHandler(event:KeyboardEvent):void{
trace ("event.keyCode="+event.keyCode);
switch(event.keyCode){
case 13:
trace("Enter pressed");
break;
case 32:
trace("Space Bar pressed");
break;
case 16:
trace("Shift Key pressed");
break;
case 112:
trace("F1 pressed");
break;
case 8:
trace("Delete pressed");
break;
}
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<mx:Button id="bt" label="one" />
</s:BorderContainer>
其关键点就是:
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandler);
关于stage到底怎么理解,详见:http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/display/Stage.html