告别过时的 event.which：升级到 function(e) 应对 JavaScript 事件侦听

2024-03-05 03:11:45

告别过时的事件侦听器：使用 function(e) 替代 event.which

作为一名 JavaScript 程序员，你在学习过程中可能会遇到一些过时的事件侦听器，如 event.which。这是因为浏览器不断更新，而旧的方法逐渐被新方法所取代。本文将深入探讨如何使用 function(e) 替换 event.which，并提供代码示例来解决常见问题。

何为 event.which？

event.which 是一个已废弃的属性，用于确定键盘事件中按下的键。由于浏览器之间的兼容性问题，它已被 event.keyCode 和 event.key 所取代。

如何使用 function(e) 替换 event.which

要替换 event.which，只需在事件侦听器中使用 function(e)。

document.addEventListener('keydown', function(e) {
  // 使用 e.key 或 e.keyCode 而不是 e.which
});

解决常见错误

在替换 event.which 时，你可能会遇到以下常见错误：

未正确绑定事件侦听器： 确保在正确的元素上绑定了事件侦听器，并且没有语法错误。
未正确检测键盘事件： 使用 event.key 或 event.keyCode 检测键盘事件，而不是 event.which。
方向值未正确设置： 确保 left、right、up 和 down 变量已正确设置为 true 或 false，以控制蛇的移动。

代码示例

下面是一个经过修改的代码示例，其中 event.which 已替换为 function(e)：

document.addEventListener('keydown', function(e) {
  if (e.key === 'ArrowLeft' && right === false) {
    left = true;
    right = false;
    down = false;
    up = false;
  } else if (e.key === 'ArrowUp' && down === false) {
    left = false;
    right = false;
    down = false;
    up = true;
  } else if (e.key === 'ArrowRight' && left === false) {
    left = false;
    right = true;
    down = false;
    up = false;
  } else if (e.key === 'ArrowDown' && up === false) {
    left = false;
    right = false;
    down = true;
    up = false;
  }
});