题目内容

JavaScript 使用方向键移动对象

题目答案

■知识点

keyCode和charCode属性在实际开发中比较常用，在不同事件类型和不同浏览器中的表现如表所示。

属性	旧事件模型	DOM事件模型
keyCode (keypress)	返回所有字符键的正确值，区分大写状态 (65-90)和小写状态（97~122)	功能键返回正确值，而Shift、Ctrl、Alt、PrintScreen、 ScrollLock无返回值，其他所有键值都返回0
keyCode (keydown)	返回所有键值（除PrintScreen键)，字母键都以大写状态显示键值（65~90)	返回所有键值（除PrintScreen键)，字母键都以大写状态显示键值（65~90)
keyCode (keyup)	返回所有键值（除PrintScreen键)，字母键都以大写状态显示键值（65~90)	返回所有键值（除PrintScreen键)，字母键都以大写状态显示键值（65〜90)
charCode (keypress)	不支持该属性	返回字符键，区分大写状态（65~90)和小写状态 (97〜122)，Shift、Ctrl、Alt、PrintScreen> ScrollLock 键无返回值，其他所有键值为0
charCode (keydown)	不支持该属性	所有键值为0
charCode (keyup)	不支持该属性	所有键值为0

常用功能键和字符键说明如表所示。

键位	码值	键位	码值
0〜9 (数字键）	48-57	A-Z (字母键）	65〜90
Backspace (退格键）	8	Tab (制表键）	9
Enter (回车键）	13	Space (空格键）	32
Left arrow (左箭头键）	37	Top arrow (上箭头键）	38
Right arrow (右箭头键）	39	Down arrow (下箭头键）	40

■实例设计

本例设计如何使用方向键控制对象的移动效果。首先获取页面元素，通过CSS脚本控制元素的绝对定位、大小和背景色，然后在document对象上注册鼠标按下事件类型处理函数，在事件回调函数keyDown()中侦测当前按下的方向键，并决定定位元素在窗口中的位置。其中，元素offsetLeft和 offsetTop属性可以存取它在页面中的位置。

var box = document.getEiementByid("box");

box.style.position = "iabsolute";

box.style.width = "20px";

box.style.height = "20px"; '

box.style.backgroundColor = "red";

document.onkeydown = keyDown; //注册keyDown事件处理函数

function keyDown (event){ //方向键控制元素移动函数

var event = event |丨 window.event; //标准化事件对象

switch(event.keyCode){ //获取当前按下键盘键的编码

case 37 : //按下左箭头键，向左移动5个像素

box.style.left = box.offsetLeft - 5 + "px";

break;

case 39 : //按下右箭头键，向右移动5个像素

box.style.left = box.offsetLeft + 5 + "px";

break;

case 38 : //按下上箭头键，向上移动5个像素

box.style.top = box.offsetTop - 5 + "px";

break;

case 40 : //按下下箭头键，向下移动5个像素

box.style.top = box.offsetTop + 5 + "px";

break;

}

return false

}

</script>