Предполагая, что вы хотите прослушивать события нажатия клавиш на всей своей странице, вы можете заменить node
на document
, который уже определен в JS.Вам также необходимо переместить оператор switch в функцию обратного вызова слушателя событий, например:
document.addEventListener("keydown", function(event) {
event.preventDefault(); // prevent page from scrolling
const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
switch (key) { // change to event.key to key to use the above variable
case "ArrowLeft":
// Left pressed
alert("Left Arrow");
break;
case "ArrowRight":
// Right pressed
alert("Right Arrow");
break;
case "ArrowUp":
// Up pressed
alert("Up Arrow");
break;
case "ArrowDown":
// Down pressed
alert("Down Arrow");
break;
}
});
body {
height: 200vh;
}
<p>Some text</p>
Объяснение:
По сути document
представляет всю вашу страницу.Вы можете добавить прослушиватель событий в ваш документ (например, страницу), чтобы функция выполнялась, когда что-то происходит.В нашем коде мы добавляем прослушиватель событий keydown
, что означает, что мы хотим выполнить некоторый код при нажатии клавиши.Код, который будет запущен, является кодом в function(event) {...}
.Когда происходит событие, мы можем получить конкретные сведения об этом событии из аргумента event
, переданного в триггерную функцию.Мы можем получить много деталей из объекта event
, переданного в нашу функцию, и одна из них - это key
, которая была нажата.В нашем коде мы нажимаем клавишу, используя evet.key
, а затем сохраняем ее в переменной с именем key
.Затем мы используем оператор switch
, чтобы проверить, какая клавиша была нажата, и выполнить соответствующий код, если появляется конкретная клавиша.