(Keydown,KeyCode)鍵盤事件的簡單使用

開發工具與關鍵技術： VS    Keydown,KeyCode
作者:聽民謠的老貓
撰寫時間：2019/4/1  16:15

W.A.S.D 是我們玩遊戲時經常用到的幾個鍵盤按鍵。通過W來觸發遊戲人物向上移動，A.S.D分別控制着左下右。也就是爲W.A.S.D綁定相應的鍵盤事件。

______ 鍵盤事件

• 鍵盤事件的使用就和鼠標事件原理一樣。只不過鼠標事件是通過鼠標的點擊來觸發，而鍵盤事件是通過相應的鍵盤按鍵來觸發。
  
  (上面是自己寫的一段貪喫蛇簡單移動的代碼)

addEventListener方法

window.addEventListener("keydown", keydown);

• 用於向指定元素添加事件句柄。並且添加的事件句柄不會覆蓋已存在的事件句柄。也就是說你可以向一個元素添加多個事件，包括同類型的事件，如：兩個 “click” 事件。
• 第一個參數是事件的類型 (如 “click” 或 “mousedown”).第二個參數是事件觸發後調用的函數。 第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的。

"keydown" :鍵盤事件定義和用法

與 keydown 事件相關的事件順序：

1. keydown - 鍵按下的過程

2. keypress - 鍵被按下

3. keyup - 鍵被鬆開

當鍵盤鍵被按下時發生 keydown 事件。
keydown() 方法觸發 keydown 事件，或規定當發生 keydown 事件時運行的函數。

知道了鍵盤事件的使用方法，那麼電腦是怎麼判斷你需要綁定的是哪個按鍵呢???

if(event.keyCode===87||event.keyCode===38){
			if(sanke1.style.transform==="rotate(90deg)"||sanke1.style.transform==="rotate(-90deg)"){
				sanke1.style.transform="rotate(0deg)"
			}else if(sanke1.style.transform==="rotate(270deg)"||sanke1.style.transform==="rotate(-270deg)"){
				sanke1.style.transform="rotate(0deg)"
			
			}
		}

通過KeyCode值簡單的判斷就可以爲你想要的按鍵綁定鍵盤事件

上面幫大家查出了鍵盤所有KeyCode值，快拿去試試吧!!!