有人能用最简单的术语解释一下如何使用事件侦听器吗?

Question

我是高中编程课的初学者，我目前正在尝试编辑我在网上找到的HTML/Javascript游戏，我想更新一个名为加速的函数:

function accelerate(n) {
    myGamePiece.gravity = n;
}

带有按键或按键上下事件。它会做的是使一个盒子加速向上或向下，无论空格键是否被按下。问题是我能找到的唯一好的事件监听器例子是使用按钮，而游戏目前使用加速按钮工作:

 <button onClick="" onkeydown="accelerate(-.5)" onkeyup="accelerate(.5)">Start Game</button>

问题是我希望窗口/文档(我不知道它是哪个)检测用户是否正在输入空格键并相应地更新加速功能。D

Answer 1

您可以(并且应该)使用addEventListener。这是一种更好的设置事件处理程序的方式，因为它不会混入HTML中，可以在动态元素上完成，并且允许多个处理程序处理单个事件。

document.addEventListener('keydown', function(e) {
  // Prevent space from causing the page to scroll
  e.preventDefault();
  
  // A nice tool for finding key codes: http://keycode.info/
  var isPressingSpace = (e.keyCode === 32);
  var isPressingA = (e.keyCode === 65); // Can also use A, if you want
  if (isPressingSpace || isPressingA) {
    document.querySelector('span').innerText = 'Accelerating';
  }
});
document.addEventListener('keyup', function() {
  document.querySelector('span').innerText = 'Decelerating';
});

<span>Decelerating</span>