JavaScript 使用方向鍵移動對象
■知識點
keyCode和charCode屬性在實際開發(fā)中比較常用,在不同事件類型和不同瀏覽器中的表現(xiàn)如表所示。
屬 性 | 舊事件模型 | DOM事件模型 |
keyCode (keypress) | 返回所有字符鍵的正確值,區(qū)分大寫狀態(tài) (65-90)和小寫狀態(tài)(97~122) | 功能鍵返回正確值,而Shift、Ctrl、Alt、PrintScreen、 ScrollLock無返回值,其他所有鍵值都返回0 |
keyCode (keydown) | 返回所有鍵值(除PrintScreen鍵),字母鍵都 以大寫狀態(tài)顯示鍵值(65~90) | 返回所有鍵值(除PrintScreen鍵),字母鍵都以大 寫狀態(tài)顯示鍵值(65~90) |
keyCode (keyup) | 返回所有鍵值(除PrintScreen鍵),字母鍵都 以大寫狀態(tài)顯示鍵值(65~90) | 返回所有鍵值(除PrintScreen鍵),字母鍵都以大 寫狀態(tài)顯示鍵值(65?90) |
charCode (keypress) | 不支持該屬性 | 返回字符鍵,區(qū)分大寫狀態(tài)(65~90)和小寫狀態(tài) (97?122),Shift、Ctrl、Alt、PrintScreen> ScrollLock 鍵無返回值,其他所有鍵值為0 |
charCode (keydown) | 不支持該屬性 | 所有鍵值為0 |
charCode (keyup) | 不支持該屬性 | 所有鍵值為0 |
鍵 位 | 碼 值 | 鍵 位 | 碼 值 |
0?9 (數(shù)字鍵) | 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 |
■實例設(shè)計
本例設(shè)計如何使用方向鍵控制對象的移動效果。首先獲取頁面元素,通過CSS腳本控制元素的絕對定位、大小和背景色,然后在document對象上注冊鼠標(biāo)按下事件類型處理函數(shù),在事件回調(diào)函數(shù)keyDown()中偵測當(dāng)前按下的方向鍵,并決定定位元素在窗口中的位置。其中,元素offsetLeft和 offsetTop屬性可以存取它在頁面中的位置。
<div id="box"></div>
<script>
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事件處理函數(shù)
function keyDown (event){ //方向鍵控制元素移動函數(shù)
var event = event |丨 window.event; //標(biāo)準(zhǔn)化事件對象
switch(event.keyCode){ //獲取當(dāng)前按下鍵盤鍵的編碼
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>
點擊加載更多評論>>