組件實作：Demo

一、前言

鍵盤輸入監聽事件是一個很有用的功能，或許在瀏覽一般的網頁時，比較不常使用鍵盤控制。但如果是遊玩網頁遊戲，取得鍵盤的監聽就會變得非常的重要，本篇主要實作最常見的方向鍵寫法，以便用於需要用到鍵盤監聽的場合時，可以快速的套用。

二、基礎鍵盤輸入

先確認監聽事件是否正常，在addEventListener內部原本的click改成keydown後看看是否能順利，使用的程式碼如下。

今天在 addEventListener搞太久了，因為一直無法順利的取得監聽結果，此時，最好能特別留意tabindex這個關鍵字。

HTML：

<div class="container" id="keydown" tabindex="0">
	<div class="movebox"></div>
</div>

tabindex="0"是建議使用的值【1】，簡單說就是，當你想要某個元素被聚焦時，就使用它。

JavaScript：

const btn = document.getElementById("keydown");

btn.addEventListener("keydown", foo, false);

function foo(e) {
	console.log("keydown now");
}

顯示結果：

之前遇到 addEventListener keydown not working 【2】這個問題，雖然用它的方法可行，但其實用tabindex="0"可以解決問題。

三、四方向輸入寫法

本文參考這篇文章【3】，實現鍵盤操作來移動元素的效果。或是先查詢有哪些按鍵可以使用【4】，程式碼如下。

發現鍵盤控制這部分沒有到很熟悉，還需要找時間惡補一下用法，等我歸來！coming soon．．．

四、推薦資源

1. 偏移量（offset dimension）
2. JS鍵盤事件（非常詳細）
3. JS鍵盤事件及鍵盤控制上下左右移動
4. js製作網頁遊戲-鍵盤控制人物移動
5. onkeydown Event - W3Schools
6. Element: keydown event - Web APIs | MDN

五、結論

本來想要使用圖片，做出類似「超級瑪莉歐」移動的效果，結果卡在一直無法順利監聽的窘境，會發生這樣的問題，原因出在無法 Focuse 到當前物件，這就要小心關鍵字tabindex的用法，如果你的使用div元素當作被監聽的元素，很有可能會有 not working 的情況發生，這時要注意是否有正確選取到該元素。

六、參考資料

1. tabindex - HTML: HyperText Markup Language | MDN
2. addEventListener keydown not working
3. 鍵盤的方向鍵控制div 進行上下左右移動，上左下右等斜方移動
4. 鍵 盤 鍵 碼 值 對 照 表