JS-30days-day1-键盘乐器JS-30days项目第一天，主要练习JavaScript的Dom事件监听，涉及键

day 1-键盘乐器

这个小项目主要是对JS的DOM事件进行测试。

明确需求：

按键触发键盘事件来播放音乐以及添加样式，之后通过transition

代码：

const keyList = document.querySelectorAll(".key");
// 对每一个.key元素添加transitionend事件监听，样式变换结束则移除.playing样式
keyList.forEach((key) => {
	key.addEventListener("transitionend", (e) => {
		e.target.classList.remove("playing");
	});
});

window.addEventListener("keydown", (e) => {
	// 这里不再使用项目作者答案中的 e.keyCode 属性，该属性已废弃
	let keyCode = e.key.length === 1 ? e.key.toUpperCase().charCodeAt() : NaN;
	// 使用属性选择器选择自定义属性元素
	let key = document.querySelector(`.key[data-key="${keyCode}"]`);
	let audioEle = document.querySelector(
		`audio[data-key="${keyCode}"]`
	);
	// 设置音频元素每次按下键从0开始播放，避免多次按键时音频还没播放完
	audioEle.currentTime = 0;
	audioEle.play();
	// 目标元素设置 playing样式
	key.classList.add("playing");
});

上面的代码中，获取键值时为了替代 e.keyCode, 使用了e.key属性，该属性返回按键的字符串；由于只需要按单个字母键，因此通过字符串长度排除其他功能键如shift等的误按，需要注意的是html元素自定义属性data-key的值都是大写字母的ASCII值。

参考资料：

KeyboardEvent事件对象相关：

developer.mozilla.org/zh-CN/docs/…

blog.csdn.net/woshidamimi…

transitionend事件：

developer.mozilla.org/zh-CN/docs/…