JavaScript30_Day1

Fri, Jul 24, 2020 1-minute read

挑戰JavaScript30的第一天

知道可以利用 window 監聽 keydown 事件來偵測使用者按下的按鍵

window.addEventListener('keydown', e => {
  console.log(e.key); //可以知道按下的字母是什麼字
  console.log(e.keyCode); //字母所代表的鍵碼
})

原來 HTML 標籤 data 是一個可以自行定義的屬性，並用 JavaScript 來操作各個 audio

<audio data-key="65" src="sounds/clap.wav"></audio>

window.addEventListener('keydown', e => {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  audio.play(); //會撥放對應案件的音效
})

以及 currentTime 對 audio 音效檔進行重製

window.addEventListener('keydown', e => {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  audio.currentTime = 0; //讓音效檔回歸初始點
  audio.play(); //會撥放對應案件的音效
})

transitionend 監聽事件

利用transitionend事件，監聽所有 block 上有 transition 的 CSS 屬性，並且透過 propertyName 來判斷是哪個 css 屬性：

const block = document.querySelector('.block');
// 監聽所有 block 上有 transition 的 CSS 屬性
block.addEventListener('transitionend', e => {
  console.log(e.propertypeName)
})

結尾

過程中嘗試以自己的能力去仿造一個與主題相同的功能，最後是每次按住按鍵沒辦法觸發audio，知道currentTime這個屬性。

最後對於用 window 監聽事件感到好奇，改成 document 是不是也可以，答案是可以的，但還是不清楚 window 和 document 的差別，特別去查了相關資料去了解一番。