iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
自我挑戰組

JavaScript 30天 跟著一起做一遍!!!系列 第 1

[Day1] JavaScript Drum Kit

關於 Javascript 30天 課程介紹

Javascript30,是由加拿大全端工程師 Wes Bos所建立的免費課程,只需透過信箱申請就能夠開始學習。
在課程中對於Javascript的運用,對於初學者的我來說是十分好的練習。網路上也有很多大大推薦,這次主要希望自己能夠有計劃有效率熟悉Javascript。堅持最後,將課程順利完成~

[Day1] JavaScript Drum Kit

需要用到的技巧與練習目標

  1. 鍵盤偵測技巧 Keydown
  2. 音效播放
  3. data-* 自定義的標籤使用
  4. 監聽 transitionend

鍵盤偵測技巧 Keydown

window.addEventListener("keydown", function (e) {
  console.log(e.keyCode); // keydown事件觸發  e.keyCode 抓出選取按鍵的數字
});

關於 keydown / keypress / keyup 三者之間的比較

  • keydown
    按鍵按下那一霎那所觸發,任何按鍵都可以取得相對應的keyCode代碼,而且不分輸入大小寫(大小寫皆為同一個keyCode代碼),一直按住不放則會連續觸發此事件。
  • keypress
    只針對可以輸入的的按鍵做觸發,大小寫觸發時會產生不同keyCode代碼,按住不放也會一直連續觸發。
  • keyup
    按鍵放開那一霎那所觸發,所以不會和前兩者一樣連續觸發。取到的keyCode和keydown的部分依樣,如果要取得input.value只能用keyup事件還獲取。

參考文章來源:

  1. https://medium.com/@yitailin/%E6%AF%94%E8%BC%83-keydown-keypress-keyup-%E7%9A%84%E5%B7%AE%E7%95%B0-4e873ba17e81
  2. https://ithelp.ithome.com.tw/articles/10259079
  3. https://pjchender.blogspot.com/2017/06/js30.html

下一篇
[Day2] CSS + JS Clock
系列文
JavaScript 30天 跟著一起做一遍!!!30

尚未有邦友留言

立即登入留言