Это поведение можно объяснить следующим образом: вы пытались назначить функцию событию onkeyup.Это происходит так же, как и при работе с переменными.Допустим,
var key = 1;
- это «сокращенный» код для
document.body.onkeyup = function(e){
// action for keypad 1
}
, а затем, при назначении другой функции обработки событий для onkeyup, вы выполняете
key = 2;
Задайте себе вопрос: содержит ли переменная key 1?Нет. Это переписывается вышеприведенным утверждением.key держит 2 сейчас.1 "потерян".По этой причине выполняется только последний обработчик событий (для клавиатуры 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?Это не продуктивно.
Чтобы предотвратить это, вы можете использовать option 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, который устарел.Вы все еще можете использовать, но это не поощряется.Вполне возможно, что разработчики браузеров решат отказаться от этого в будущем.Это приводит к неработающему коду.Проблема в том, что каждый браузер / ОС имеет свои собственные коды клавиш, что делает его менее надежным.
Для чистого подхода, пожалуйста, рассмотрите возможность использования KeyboardEvent.code