一个 JS 文件中的多个 keyup 事件

Question

我的 HTML 网页有一个 JS 文件。我想检查 4 件事。如果他们在键盘上敲击数字 1-4，就会将他们带到指定的 url。该脚本有效，但前提是我有一个。

当我将所有 4 个事件都放入 js 文件时，只有最后一个 one/most 最近的事件有效。是否有某种我做错的语法导致所有 4 个语法无法正常工作？

进一步说明，使用这段代码，只有这部分脚本运行：

//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";

JS:

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
}
//If they hit keypad number 2
document.body.onkeyup = function(e){
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
}
//If they hit keypad number 3
document.body.onkeyup = function(e){
    if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
}
//If they hit keypad number 4
document.body.onkeyup = function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

Answer 1

您好，欢迎来到 Whosebug ;)

您每次都在注册一个新的onkeyup 事件侦听器。尝试像这样将 if 语句全部放入一个侦听器中：

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
     if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

希望对您有所帮助。

Answer 2

您正在覆盖事件处理程序，您需要在那里有一个函数。试试这个选项：

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    } else if(e.keyCode == 50){
        window.location.href = "foo";
    } else if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    } else if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

或者您可以改用开关。

Answer 3

如果将所有条件放入同一个函数中，效果会很好。否则你每次都会覆盖你的函数。这就是为什么您会遇到唯一有效的事件是最后一个事件的问题。最后一件事，尝试使用 if 然后 else if。否则你将无缘无故地验证每一个条件。

//If they hit keypad number 1
document.body.onkeyup = function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
    else if(e.keyCode == 50){
        window.location.href = "foo";
    }
    else if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
    else if(e.keyCode == 52){
        window.location.href = "foo";
    }
}

Answer 4

是的，有一种替代语法允许将多个事件处理程序添加到同一对象而不会相互覆盖。

addEventListener('keyup', functionHere );

/*
// This will work without overriding other functions...
//If they hit keypad number 1
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 49){
        window.location.href = "http://localhost:1337/trail";
    }
});
//If they hit keypad number 2
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 50){
        window.location.href = "foo";
    }
});
//If they hit keypad number 3
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 51){
        window.location.href = "http://localhost:1337/topten";
    }
});
//If they hit keypad number 4
document.body.addEventListener("keyup", function(e){
    if(e.keyCode == 52){
        window.location.href = "foo";
    }
});
*/

// It may be best to combine them all even when using this method...
document.body.addEventListener("keyup", function(e) {
  //If they hit keypad number 1
  if (e.keyCode == 49) {
    window.location.href = "http://localhost:1337/trail";
  }
  //If they hit keypad number 2
  if (e.keyCode == 50) {
    window.location.href = "foo";
  }
  //If they hit keypad number 3
  if (e.keyCode == 51) {
    window.location.href = "http://localhost:1337/topten";
  }
  //If they hit keypad number 4
  if (e.keyCode == 52) {
    window.location.href = "foo";
  }
});

Answer 5

也许将所有 if 添加到一个事件侦听器中：

document.body.addEventLister("keydown", function(e) {
    if (e.key == "Digit1") {
        window.location.href = "http://localhost:1337/trail";
    }
    if (e.key == "Digit2") {
        window.location.href = "foo";
    }
     if (e.key == "Digit3") {
        window.location.href = "http://localhost:1337/topten";
    }
    if (e.keyCode == "Digit4") {
        window.location.href = "foo";
    }
}

Answer 6

此行为可以这样解释：您试图做的是为 onkeyup 事件分配一个函数。这与使用变量时的方式相同。比方说

var key = 1;

是"reduced"代码

document.body.onkeyup = function(e){
  // action for keypad 1
}

然后，当为您的 onkeyup 分配另一个事件处理函数时，您正在做

key = 2;

问自己一个问题：变量 key 是否保持 1？不，这将被上述声明覆盖。 key 现在持有 2。 1 是 "lost"。这就是为什么只执行最后一个事件处理程序（键盘 4）的原因。上次的作业覆盖了之前的作业。

要解决此问题，您有两种选择：

将事件操作组合在一个函数中
使用EventTarget.addEventListener

使用选项 1，您可以将您的操作分组到一个函数中，如下面的交互式示例所示：

// input acts as your document.body
const inp = document.getElementById('foo');

inp.onkeyup = function(e) {
  if(e.keyCode == 49) {
    console.log('pressed keyCode 49'); // press 1
  }
  else if(e.keyCode == 50) {
    console.log('pressed keyCode 50'); // press 2
  }
  else if(e.keyCode == 51) {
    console.log('pressed keyCode 51'); // press 3
  }
  else if(e.keyCode == 52) {
    console.log('pressed keyCode 52'); // press 4
  }
};

<input id="foo" type="text" placeholder="type something">

但有时这并不灵活。也许您想对 keyup 事件执行两个不同的操作。当然，您可以将其分组在一个函数中，但是如果另一个 js 文件覆盖了该函数怎么办？或者 js 文件中的另一个片段？那是没有生产力的。

为防止这种情况，您可以使用 选项 2: .addEventListener，这是一种更可靠的方法。下面是一个交互式示例：

// input acts as your document.body
const inp = document.getElementById('foo');

inp.addEventListener('keyup', function(e) {
  if(e.keyCode == 49) {
    console.log('first function: keyCode 49'); // press 1
  }
}); 
inp.addEventListener('keyup', function(e) {
  if(e.keyCode == 50) {
    console.log('second function: keyCode 50'); // press 2
  }
});

<input id="foo" type="text" placeholder="type something">

此外，我想添加另一个建议：您使用的 .keyCode 已被弃用。您仍然可以使用，但不鼓励这样做。浏览器开发人员可能会决定在将来放弃它。这会导致无法正常运行的代码。问题是每个 browser/OS 都有自己的密钥代码，这使得它不太可靠。

为了干净的方法，请考虑使用 KeyboardEvent.code

Answer 7

大多数人的答案都有效，但是为了简单地避免代码重复和长篇大论的 'IF' 语句，我会这样使用 switch 语句：

document.body.onkeyup = function(e){
    switch(e.keyCode) {
        case 49:
            window.location.href = "http://localhost:1337/trail";
            break;
        case 50:
            window.location.href = "foo";
            break;
        case 51:
            window.location.href = "http://localhost:1337/topten";
            break;
        case 52:
            window.location.href = "foo";
            break;
    }
}

一个 JS 文件中的多个 keyup 事件

Multiple keyup events in one JS FILE

html

javascript

events

onkeyup

dom-events