javascript 按键事件(兼容各浏览器)

JavaScript按键事件(兼容各浏览器)攻略

在Web开发中，经常需要处理按键事件。JavaScript提供了多种处理按键事件的方法，但是不同浏览器对按键事件的处理有所差异，因此我们需要编写兼容不同浏览器的代码。

键盘码

在处理按键事件之前，我们需要了解键盘码。键盘码是一个表示按键的数字代码。不同的按键对应不同的键盘码。我们可以通过键盘码来判断用户按下了哪个键。

事件对象

JavaScript中的按键事件是通过事件对象来传递的。在事件处理函数中，我们可以通过参数来获取事件对象。事件对象包含了当前事件的相关信息，如触发事件的元素、按下的键的键盘码等。

兼容各浏览器的按键事件

方法一

document.onkeydown = function(event) {
  event = event || window.event;
  var keyCode = event.keyCode || event.which;
  // 处理按键事件
};

这种方式在所有主流浏览器中都能够正常工作。首先判断event是否存在，如果不存在使用window.event代替。然后获取键盘码，优先使用keyCode，如果不存在则使用which。

方法二

document.addEventListener('keydown', function(event) {
  var keyCode = event.keyCode || event.which;
  // 处理按键事件
});

这种方式使用addEventListener注册事件，但是在IE8及以下版本不支持。和方法一不同的是，不需要判断event是否存在，因为addEventListener的第二个参数就是事件处理函数。

示例

下面是一个示例，当用户按下Enter键时弹出提示框。

document.addEventListener('keydown', function(event) {
  var keyCode = event.keyCode || event.which;
  if (keyCode === 13) {
    alert('Enter键被按下');
  }
});

下面是一个示例，当用户同时按下Ctrl和S键时阻止默认行为。

document.addEventListener('keydown', function(event) {
  var keyCode = event.keyCode || event.which;
  if (event.ctrlKey && keyCode === 83) {
    event.preventDefault();
    alert('阻止了保存操作');
  }
});

以上就是JavaScript按键事件(兼容各浏览器)的完整攻略。