Flex之旅：第一部分：flex必备基础知识积累(1)---监听键盘事件的注意事项

声明：关于我写的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