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








  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值