01 JavaScript Drum Kit

效果

点击图查看效果

效果
Github

知识点

1. 事件
2. 播放音频
3. 操作class
4. HTML data-* 属性 参考

笔记

事件

所有事件参考

全局监听 kewdown 键盘事件：

window.addEventListener('keydown', playSound)

addEventListener() 的第二个参数，是一个回调函数，这个函数支持一个参数（event）,这个参数就是该监听对象注册的 Event 对象。

transitionend 事件指 CSS transition 结束。

NodeList

通过 querySelectorAll() 方法获取到的是一个 NodeList 对象，它是一个节点的集合，具有一些 Array 的特性，比如可以通过 length 获取长度，通过 [] 获取某个对应索引的节点，可以通过 for 循环和 forEach() 方法遍历。但是不能使用其他的数组方法。可以通过 Array.from() 方法将 NodeList 对象转化为数组。

const keys = Array.from(document.querySelectorAll('.key'))

classList 方法

1. add() 添加指定的类
2. remove() 删除指定的类
3. item() 按集合中的索引返回类
4. toggle() 切换类
5. contains() 检查是否存在指定的类
6. replace() 用一个新类替换已有的类

const div = document.createElement('div')
div.className = 'aaa'

console.log(div.outerHTML)    // <div class="aaa"></div>

div.classList.add('bbb', 'ccc')
div.classList.remove('aaa')

console.log(div.outerHTML)    // <div class="bbb ccc"></div>

div.classList.toggle('ddd')    // true
console.log(div.outerHTML)    // <div class="bbb ccc ddd"></div>

div.classList.toggle('bbb')    // false
console.log(div.outerHTML)    // <div class="ccc ddd"></div>

div.classList.toggle('aaa', 3 > 1)    // true
console.log(div.outerHTML)    // <div class="ccc ddd aaa"></div>

div.classList.toggle('ccc', 3 < 1)    // false
console.log(div.outerHTML)    // <div class="ddd aaa"></div>

div.classList.item(0)    // 'ddd'
div.classList.item(2)    // null

div.classList.contains('aaa')    // true
div.classList.contains('eee')    // false

div.classList.replace('aaa', 'ccc')
console.log(div.outerHTML)    // <div class="ddd ccc"></div>