为什么不是'；javascript addEventListener没有做任何事情吗？

我正在尝试编写一个脚本，使用箭头键和Javascript eventlistener在蓝色框内移动橙色框。当我运行页面时，什么都没有发生。我试着在控制台中四处搜索，但它根本没有给我任何输出。我肯定我错过了一些小东西，但我一辈子都想不出来。任何建议都很好

var orange=document.getElementById（“橙色”）；
橙色。addEventListener（“onkeydown”，move，false）；
功能移动（e）；
e=e | | window.event；
如果（e.keyCode=='38'）{//up
if（parseInt（orange.style.top）>'0'）{
orange.style.top=parseInt（orange.style.top）-5；
}
}如果（e.keyCode='40'）{//down
if（parseInt（orange.style.top）<'425'）{
orange.style.top=parseInt（orange.style.top）+5；
}
}如果（e.keyCode='37'）{//left
if（parseInt（orange.style.top）>'0'）{
orange.style.left=parseInt（orange.style.left）-5；
}
}如果（e.keyCode='39'）{//right
if（parseInt（orange.style.left）<'425'）{
orange.style.left=parseInt（orange.style.left）+5；
}    
}
}

#蓝色{
背景颜色：蓝色；
位置：相对位置；
高度：500px；
宽度：500px
}
#橙色的{
背景颜色：橙色；
位置：绝对位置；
宽度：75px；
高度：75px；
};
您的控制台中应该会出现语法错误，因为您没有正确声明
移动功能

function move(e);

    e = e || window.event;

应该是这样的：

function move(e) {

        e = e || window.event;

var orange = document.getElementById("orange");
var move = function(e){
    orange.classList.add("red");
}
window.addEventListener("keydown", move, false);

您的控制台中应该会出现语法错误，因为您没有正确声明
move
函数

function move(e);

    e = e || window.event;

应该是这样的：

function move(e) {

        e = e || window.event;

var orange = document.getElementById("orange");
var move = function(e){
    orange.classList.add("red");
}
window.addEventListener("keydown", move, false);

你有几个问题：

1） 事件是
keydown
而不是
onkeydown
（除非您直接添加到对象：（例如
orange.onkeydown
）

2） Top以像素为单位，而不仅仅是一个整数-您需要将
+'px'
添加到Top更改中：
orange.style.Top=parseInt（orange.style.Top）+5+'px'

其他说明：


在窗口上安装事件侦听器可能会更好，因为它会有焦点，idk没有测试
e.keyCode
是一个数字，而不是字符串
正如@bmceldowney所提到的，函数声明中存在语法错误

代码的工作版本：
您有几个问题：

1） 事件是
keydown
而不是
onkeydown
（除非您直接添加到对象：（例如
orange.onkeydown
）

2） Top以像素为单位，而不仅仅是一个整数-您需要将
+'px'
添加到Top更改中：
orange.style.Top=parseInt（orange.style.Top）+5+'px'

其他说明：


在窗口上安装事件侦听器可能会更好，因为它会有焦点，idk没有测试
e.keyCode
是一个数字，而不是字符串
正如@bmceldowney所提到的，函数声明中存在语法错误

代码的工作版本：
如Mozilla在中所述，
keydown事件的可能目标（不是代码中错误写入的onkeydown）是

聚焦元素处理关键事件，根元素（如果不合适）
以输入元素为中心

因此，基本上只有输入（
和
）或根元素（文档或窗口）可以处理事件

按如下方式修改代码：

function move(e) {

        e = e || window.event;

var orange = document.getElementById("orange");
var move = function(e){
    orange.classList.add("red");
}
window.addEventListener("keydown", move, false);

这里有一个指向JSFIDLE的链接：

希望有帮助：）
正如Mozilla在中所述，
keydown事件的可能目标（不是代码中错误写入的onkeydown）是

聚焦元素处理关键事件，根元素（如果不合适）
以输入元素为中心

因此，基本上只有输入（
和
）或根元素（文档或窗口）可以处理事件

按如下方式修改代码：

function move(e) {

        e = e || window.event;

var orange = document.getElementById("orange");
var move = function(e){
    orange.classList.add("red");
}
window.addEventListener("keydown", move, false);

这里有一个指向JSFIDLE的链接：

希望它有帮助：）
好的，我更改了它，但没有任何区别。这只是它的一部分，如果按键没有关联，则无法将它与该div关联。这里有一个可能的解决方案：好的，我改变了它，但它没有区别。这只是它的一部分，如果按键没有关联，你不能将它关联到该div。这里有一个可能的解决方案：是的。div不太可能有焦点，因此它不会收到keydown事件。像input和textareas这样的UI元素可以接收按键事件。我更喜欢在文档或窗口上收听，因为不管页面的哪个部分有焦点，事件都会冒泡。谢谢！我做了你和@slebetman建议的更改，效果非常好。是的。div不太可能有焦点，因此它不会收到keydown事件。像input和textareas这样的UI元素可以接收按键事件。我更喜欢在文档或窗口上收听，因为不管页面的哪个部分有焦点，事件都会冒泡。谢谢！我做了您和@slebetman建议的更改，效果非常好。仅供参考，
e=e | | window.event是不必要的。在
addEventListener
handler.FYI，
e=e | | | window.event是不必要的。您在
addEventListener
处理程序中使用了一个毫无意义的修复程序。我从未听说过JSFIDLE，看起来它会非常有用！当您需要将某个东西与代码库的其余部分隔离开来进行测试时，它非常有用：）也可以尝试codepen.io；）我从来没有听说过JSFIDLE，看起来它真的很有用！当您需要将某个东西与代码库的其余部分隔离开来进行测试时，它非常有用：）也可以尝试codepen.io；）