---
# System prepended metadata

title: '[JS30]DAY1:Drum Kit'

---

# [JS30]DAY1:Drum Kit


:::info
:black_small_square:**目標：** 
:::

按下鍵盤後要播放出相對應的聲音，並同時產生一個特效，按下其他鍵後就會關閉該特效。
:::info
:black_small_square:**步驟流程**： 
:::


Step1. 新增keydown listener：監聽鍵盤按鈕按下。

Step2. 建立playHandler：play sound去播放聲音和DOM style的特效。

Step3. 新增transitionend listener：以css特效結束作監聽。

Step4. 建立function removeClassList：移除'playing'樣式。



:::info
:black_small_square:**學習筆記：** :mega:
:::


### ==getElement 和 querySelector區別==
─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═──═♤═─‧─═♥═─
 * querySelector
     * 返回的是一個 Static Node List（靜態）
     * 接收的參數是一個CSS選擇符
 * getElementsBy 系列
     * 返回的是一個 Live Node List（動態）
     * 接收的參數只能是單一的className，tagName和name
    
### ==ClassList 屬性==
─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═──═♤═─‧─═♥═─

DOM裡每個節點上都有一個classList物件。
1. 可用裡面的方法新增、刪除、修改節點上的CSS。
2. 也可以用它來判斷某個節點是否被賦予了某個CSS。

    ### 新增類（add）
    鍵盤按鍵觸發時，增加playing這個class。
    ```javascript=
    //DOM style
    function playHandler(e){
        const dom = document.querySelector(`div[data-key="${e.keyCode}"]`);
        if (dom){
          dom.classList.add('playing');
        }
    ```
    ### 移除類(remove)
    transitionend的時候去remove掉playing這個class。
    ```javascript=
    function removeClassList(e){
        console.log(e)
        if(e.propertyName === 'transform'){
          e.target.classList.remove('playing')
        }
      }
    ```

### ==TransitionEvent事件==
─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═──═♤═─‧─═♥═─
CSS屬性的值從一個值變成另一個值的過程叫做漸變。CSS3 transition系列屬性可控制這個變化過程，使得屬性值變化過程更加平滑。
### transitionend
當一個CSS過渡完成時，會出現transitionend事件。
    
### ==＝＝＝==
─═♤═─‧─═♥═─‧─═♤═─‧─═♥═─‧─═♤═──═♤═─‧─═♥═─
```javascript=
   if(e.propertyName === 'transform'){
      e.target.classList.remove('playing')
    }
```
== 左右兩邊的值相等就回傳true
=== 左右兩邊的值以及type均相等才回傳true
    


