[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