javascript - 为什么 Javascript addEventListener 不执行任何操作？

Question

我正在尝试编写一个脚本，使用箭头键和 Javascript 事件监听器在蓝色框内移动橙色框。当我运行该页面时，没有任何反应。我尝试在控制台中查看，但它根本没有给我任何输出。我确信我错过了一些小东西，但我一生都无法弄清楚。任何建议都会很棒!

var orange = document.getElementById("orange");
orange.addEventListener("onkeydown", move, false);
function move(e);
    			
e = e || window.event;
    
   if(e.keyCode == '38'){ //up
    	if(parseInt(orange.style.top) > '0'){
    		orange.style.top = parseInt(orange.style.top) - 5;
    	}
   } else if (e.keyCode == '40'){ //down
    	if(parseInt(orange.style.top) < '425'){
    		orange.style.top = parseInt(orange.style.top) + 5;
    	}
   } else if (e.keyCode == '37'){ //left
    	if(parseInt(orange.style.top) > '0'){
    		orange.style.left = parseInt(orange.style.left) - 5;
    	}
   } else if (e.keyCode == '39') { //right
    	if(parseInt(orange.style.left) < '425') {
    		orange.style.left = parseInt(orange.style.left) + 5;
    	}    
   }
}
    	

#blue{
    background-color: blue;
    position: relative;
    height: 500px;
    width: 500px
}
#orange{
    background-color: orange;
    position: absolute;
    width: 75px;
    height: 75px;
};

 <div id="blue">
     <div id ="orange" style="left: 30px; top:30px;"></div>
 </div>
    

Answer 1

您有几个问题:

1) 事件是keydown不是onkeydown (除非您直接添加到对象:(例如 orange.onkeydown )

2) Top 以像素为单位，而不仅仅是一个整数 - 您需要添加 + 'px'到您的主要更改: orange.style.top = parseInt(orange.style.top) + 5 + 'px'

其他说明:

• 将事件监听器放在窗口上可能会更好，因为它将具有焦点，但我不知道 - 没有对此进行测试。
• e.keyCode是数字，而不是字符串
• 正如 @bmceldowney 提到的，您的函数声明中有语法错误

代码的工作版本:https://jsfiddle.net/kkhkL065/