javascript - 如何使用JavaScript添加调用另一个函数onkeyup的函数？

Question

因此，基本上，我有一个小网站，就像架子鼓一样。我希望它在您单击屏幕上的元素时播放声音，然后我还希望每当按下相应的数字键盘键时都可以“单击”相同的屏幕上的元素。

当我单击它时就可以播放它，但是我无法使onkeyup函数正常工作。

  const sounds = document.querySelectorAll('.sound');
  const drumPads = document.querySelectorAll('.drumpadContainer');
  const keycodes =[
    49,
    50,
    51,
    52,
    53,
    54
  ]

  //Can i make sound??

  drumPads.forEach((drumpad, index) => {
    drumpad.addEventListener('click', function() {
      console.log("You clicked a button");
      sounds[index].currentTime = 0;
      sounds[index].play();
    })
    drumpad.addEventListener('onkeyup', function() {
      if (onkeyup == keycodes[index]){
        drumPads[index].click();
      }
    })

  });



})

Answer 1

keyup处理程序应位于window上。它应该获取键控代码的索引，然后使用它来获取要单击的相应元素的索引。

window.addEventListener("keyup", function(e) {
    var index = keycodes.indexOf(e.keyCode);
    if (index > -1) {
        drumPads[index].click();
        e.preventDefault();
        e.stopPropagation();
    }
}