有人可以用最简单的术语解释如何使用事件监听器吗？

Question

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

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

使用按键或keydown/up事件.无论空格键是否被按下,它的作用是使盒子加速或缩小.问题是我可以找到使用按钮的唯一好的事件监听器示例,并且游戏当前使用加速按钮:

 <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>