# 9. 透過 keydown 事件，增加使用者的體驗

### HTML:

- 設計一個黑框框的圓圈，.show 只是提示文字設計，非重點。

    <h1>選擇您喜歡的顏色</h1>
    <p>說明：共5種，請選擇數字按鍵：1~5</p>
    <div class="circle"></div>
    <p class="show"></p>

### CSS:

- 基本的黑色圈圈

.circle {
    width: 80px;
    height: 80px;
    border: 1px solid black;
    border-radius: 50%;
}


---

### JavaScript:

// 透過鍵盤輸入則可觸發事件，故綁定：body
var pagetouch = document.querySelector('.body');

// 綁定圈圈
var box = document.querySelector('.circle');

### 使用監聽事件 'keydown'

- keydown 是什麼？

透過點擊鍵盤的方式，可以觸發事件。

製作工具之前，可以使用 `console.log` 來查詢

`e.target.keyCode`，這是一個按下鍵盤可以反饋當下鍵盤是什麼代碼

以利於下面程式碼的製作：

### switch 語法搭配 'keydown' event ＆ e.keyCode 的用法：

pagetouch.addEventListener('keydown', keydowncase, false);
function keydowncase(e) {
    var show = document.querySelector('.show');
    console.log(e.keyCode);
    switch (e.keyCode) {
        case 49:
            box.style.background = 'blue';
            show.textContent = '選擇代碼:49';
            break;
        case 50:
            box.style.background = 'orange';
            show.textContent = '選擇代碼:50';
            break;
        case 51:
            box.style.background = '#bf0060';
            show.textContent = '選擇代碼:51';
            break;
        case 52:
            box.style.background = '#ffff45';
            show.textContent = '選擇代碼:52';
            break;
        case 53:
            box.style.background = 'red';
            show.textContent = '選擇代碼:53';
            break;
    }
}

### 輸入鍵盤 1~5 測試圓圈是否正常換顏色 ：）

- 可以將程式碼貼到 VScode，不明原因在[CodePen](https://codepen.io/rrpaqjcq/pen/JjpQjWG) 無法使用

###### tags: `JavaScript - event 事件`