javascript的鍵盤控制事件

擷取鍵盤控制事件是實現互動性最有力的方法之一。 JpDLinux聯盟
   JpDLinux聯盟
  　首先需要瞭解的是如何初始化該事件，基本語句如下： JpDLinux聯盟
   JpDLinux聯盟
  　document.onkeydown = keyDown JpDLinux聯盟
   JpDLinux聯盟
  　當瀏覽器讀到這個語句時，無論按下鍵盤上的哪個鍵，都將呼叫KeyDown()函數。 JpDLinux聯盟
   JpDLinux聯盟
  　捕獲鍵盤事件對於不同的瀏覽器來說有點困難，我們分別的來學習不同瀏覽器的實現語句。 JpDLinux聯盟
   JpDLinux聯盟
  　Netscape JpDLinux聯盟
   JpDLinux聯盟
  　Netscape的程式實現要比IE麻煩，你必須放一個特別的語句，來使Netscape始終去檢查擊鍵事件，如果沒有這行語句，擊鍵事件將與按下滑鼠事件搞混。特別語句如下： JpDLinux聯盟
   JpDLinux聯盟
  　document.onkeydown = keyDown JpDLinux聯盟
  if (ns4) document.captureEvents(Event.KEYDOWN) JpDLinux聯盟
   JpDLinux聯盟
  　keyDown()函數有一個隱藏的變數--一般的，我們使用字母“e”來表示這個函數。 JpDLinux聯盟
   JpDLinux聯盟
  　function keyDown(e) JpDLinux聯盟
   JpDLinux聯盟
  　 變數e表示發生擊鍵事件，尋找是哪個鍵被按下，使用以下屬性： JpDLinux聯盟
   JpDLinux聯盟
  　 e.which JpDLinux聯盟
   JpDLinux聯盟
  　 這將給出該鍵的索引值，把索引值轉化成該鍵的字母或數字值，寫： JpDLinux聯盟
   JpDLinux聯盟
  　 String.fromCharCode(e.which) JpDLinux聯盟
   JpDLinux聯盟
  　 把上面的語句放在一起，我們可以知道被按下的是哪一個鍵： JpDLinux聯盟
   JpDLinux聯盟
   function keyDown(e) { JpDLinux聯盟
  　var keycode = e.which JpDLinux聯盟
  　var realkey = String.fromCharCode(e.which) JpDLinux聯盟
  　alert("keycode: " + keycode + " realkey: " + realkey) JpDLinux聯盟
  } JpDLinux聯盟
   JpDLinux聯盟
  document.onkeydown = keyDown JpDLinux聯盟
  document.captureEvents(Event.KEYDOWN)

  　Internet Explorer JpDLinux聯盟
   JpDLinux聯盟
  　IE的程式與Netscape類似，但它不需要e變數，用window.event.keyCode來代替e.which，把鍵的索引值轉化為真實索引值方法類似：String.fromCharCode(event.keyCode)，程式如下： JpDLinux聯盟
   JpDLinux聯盟
  　function keyDown() { JpDLinux聯盟
  　var keycode = event.keyCode JpDLinux聯盟
  　var realkey = String.fromCharCode(event.keyCode) JpDLinux聯盟
  　alert("keycode: " + keycode + " realkey: " + realkey) JpDLinux聯盟
  } JpDLinux聯盟
  document.onkeydown = keyDown JpDLinux聯盟
  document.onkeydown = keyDown JpDLinux聯盟
   JpDLinux聯盟
  　適用於兩者的程式 JpDLinux聯盟
   JpDLinux聯盟
  　用兩種瀏覽器檢查上述執行個體，你會發現執行結果不總是一樣的，這是因為兩種瀏覽器的鍵盤代碼設定不相同，因此你必須使用單獨的代碼分別來寫這段程式，而毫無別法。 JpDLinux聯盟
   JpDLinux聯盟
  　建議你要完全忘掉實際的索引值，僅僅使用鍵盤的代碼值來工作。下面這段程式將視情況而設定，如果是用IE的話，ieKey生效，把nKey設為0，如果是用Netscape的話，nKey生效，把nKey設為0，然後用一個警示框來顯示兩者的值： JpDLinux聯盟
   JpDLinux聯盟
  　　 function keyDown(e) { JpDLinux聯盟
  　　if (ns4) { JpDLinux聯盟
  　　　var nKey=e.which; JpDLinux聯盟
  　　　var ieKey=0 JpDLinux聯盟
  　　} JpDLinux聯盟
  　　if (ie4) { JpDLinux聯盟
  　　　var ieKey=event.keyCode; JpDLinux聯盟
  　　　var nKey=0 JpDLinux聯盟
  　　} JpDLinux聯盟
  　　alert("nKey:"+nKey+" ieKey:" + ieKey) JpDLinux聯盟
  } JpDLinux聯盟
  document.onkeydown = keyDown JpDLinux聯盟
  if (ns4) document.captureEvents(Event.KEYDOWN) JpDLinux聯盟
   JpDLinux聯盟
  　使用鍵盤移動對象 JpDLinux聯盟
   JpDLinux聯盟
  　下面的程式實現用鍵盤移動對象，程式將檢查哪一個鍵被按下，從而調用相應的函數來移動對象。本例中，當字母“A”被按下時，對象就開始移動，字母“A”鍵在nKey中的值是97，ieKey的值為65，在程式中將分別檢查這兩個值。

　　 function init() { JpDLinux聯盟
  　　if (ns4) block = document.blockDiv JpDLinux聯盟
  　　if (ie4) block = blockDiv.style JpDLinux聯盟
  　　block.xpos = parseInt(block.left) JpDLinux聯盟
  　　document.onkeydown = keyDown JpDLinux聯盟
  　　if (ns4) document.captureEvents(Event.KEYDOWN) JpDLinux聯盟
  } JpDLinux聯盟
  function keyDown(e) { JpDLinux聯盟
  　　if (ns4) { var nKey=e.which; var ieKey=0 } JpDLinux聯盟
  　　if (ie4) { var ieKey=event.keyCode; var nKey=0 } JpDLinux聯盟
  　　if (nKey==97 || ieKey==65) { // 如果"A"鍵按下 JpDLinux聯盟
  　　　　slide() JpDLinux聯盟
  　　} JpDLinux聯盟
  } JpDLinux聯盟
  function slide() { JpDLinux聯盟
  　　block.xpos += 5 JpDLinux聯盟
  　　block.left = block.xpos JpDLinux聯盟
  　　status = block.xpos // 這一句不一定需要，只是為了檢查狀態 JpDLinux聯盟
  　　setTimeout("slide()",30) JpDLinux聯盟
  } JpDLinux聯盟
   JpDLinux聯盟
  　增加 "Active"變數 JpDLinux聯盟
   JpDLinux聯盟
  　上面程式稍微有些不足，對象移動以後就無法使它停止了，而且當你多按幾次Ａ鍵時，物體將運動得越來越快，這裡我們來修補它。 JpDLinux聯盟
   JpDLinux聯盟
  　使用變數"active"來改變這種情況，插入if語句來檢查函數是否重複。 JpDLinux聯盟
   JpDLinux聯盟
  　　 function slide() { JpDLinux聯盟
  　　if (myobj.active) { JpDLinux聯盟
  　　myobj.xpos += 5 JpDLinux聯盟
  　　myojb.left = myobj.xpos JpDLinux聯盟
  　　setTimeout("slide()",30) JpDLinux聯盟
  　　} JpDLinux聯盟
  } JpDLinux聯盟
   JpDLinux聯盟
  　在這種情況中，slide()函數只有在myobj.active值為真的時候才會工作，當myobj.active值為假時，對象將停止移動。 JpDLinux聯盟
   JpDLinux聯盟
  　使用 onKeyUp 和 "Active" 變數

　 onkeyup事件和onkeydown事件工作原理相同,用以下語句初始化該事件: JpDLinux聯盟
   JpDLinux聯盟
  document.onkeydown = keyDown JpDLinux聯盟
  document.onkeyup = keyUp JpDLinux聯盟
  if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP) JpDLinux聯盟
   JpDLinux聯盟
  keyUp() 函數與之相同，當一個鍵被放開時事件被激發，對象停止移動，並將active變數置為0： JpDLinux聯盟
   JpDLinux聯盟
  　　 function keyUp(e) { JpDLinux聯盟
  　　if (ns4) var nKey = e.which JpDLinux聯盟
  　　if (ie4) var ieKey = window.event.keyCode JpDLinux聯盟
  　　if (nKey==97 || ieKey==65) JpDLinux聯盟
  　　block.active = false JpDLinux聯盟
  } JpDLinux聯盟
   JpDLinux聯盟
  　下面是比較完整的程式： JpDLinux聯盟
   JpDLinux聯盟
  　　 function init() { JpDLinux聯盟
  　　if (ns4) block = document.blockDiv JpDLinux聯盟
  　　if (ie4) block = blockDiv.style JpDLinux聯盟
  　　block.xpos = parseInt(block.left) JpDLinux聯盟
  　　block.active = false JpDLinux聯盟
  　　document.onkeydown = keyDown JpDLinux聯盟
  　　document.onkeyup = keyUp JpDLinux聯盟
  　　if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP) JpDLinux聯盟
  } JpDLinux聯盟
  function keyDown(e) { JpDLinux聯盟
  　　if (ns4) {var nKey=e.which; var ieKey=0} JpDLinux聯盟
  　　if (ie4) {var ieKey=event.keyCode; var nKey=0} JpDLinux聯盟
  　　if ((nKey==97 || ieKey==65) && !block.active) { // if "A" key is pressed JpDLinux聯盟
  　　　　block.active = true slide() JpDLinux聯盟
  　　} JpDLinux聯盟
  } JpDLinux聯盟
  function keyUp(e) { JpDLinux聯盟
  　　if (ns4) {var nKey=e.which; var ieKey=0}