javascript - addEventListener:事件未添加到特定位置(keydown)
问题描述
我在我的文档中添加了 2 个事件侦听器,虽然其中一个在另一个之后不起作用,但在另一个之前工作正常,我不知道为什么?指定代码:
document.addEventListener("keydown", function() {
alert("key was pressed!");
});
当它放在“click”事件侦听器之上时,它工作正常,问题是当它放在它之后时,只有“click”有效,而“keydown”无效。
我的代码:
var buttonLength = document.querySelectorAll(".drum").length;
document.addEventListener("keydown", function() {
alert("key was pressed!");
}); //Works here
for (i = 0; i <= buttonLength; i++) {
document.querySelectorAll(".drum")[i].addEventListener("click", function() {
var buttonInnerHTML = this.innerHTML;
switch (buttonInnerHTML) {
case "w":
var tom1 = new Audio('sounds/tom-1.mp3');
tom1.play();
break;
case "a":
var tom2 = new Audio('sounds/tom-2.mp3');
tom2.play();
break;
case "s":
var tom3 = new Audio('sounds/tom-3.mp3');
tom3.play();
break;
case "d":
var tom4 = new Audio('sounds/tom-4.mp3');
tom4.play();
break;
case "j":
var snare = new Audio('sounds/snare.mp3');
snare.play();
break;
case "k":
var crash = new Audio('sounds/crash.mp3');
crash.play();
break;
case "l":
var kick = new Audio('sounds/kick-bass.mp3');
kick.play();
break;
default:
console.log(buttonInnerHTML);
}
});
}
document.addEventListener("keydown", function() {
alert("key was pressed!");
}); //Doesn't work here
解决方案
你的问题在 for 循环中。
迭代次数过多,改为:
for (i = 0; i < buttonLength; i++) //(remove equal sign)
您的代码抛出错误,因此引擎无法继续下一个按键事件
推荐阅读
- reactjs - 如何使用 React 钩子中的表单进行 console.log 状态?
- php - 如何将 cURL 转换为 Guzzle GET
- pandas - 如何使用未识别的 feature.id 绘制带有 folium 和 geoJson 的 Choropleth 地图?
- rxjs - 如何从失败的 forkJoin 请求中获取数据?
- java - java:二十一点游戏缺少返回语句
- node.js - GET 端点返回 404
- python - 使用预训练的权重初始化密集张量流层
- c - 转换为科学计数法
- javascript - 如何创建 cookie 和隐藏 div?
- angular - 为什么单独的“样式”在@Component 装饰器内有一个方括号?