Javascript addEventListener() 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10839642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
addEventListener() not working
提问by Bluefire
Ok, so I tried to make this page with an addEventListener function, to address the clicking of a button; It didn't work. I narrowed it down by deleting everything but the basic elements needed for the listener, and am left with the following:
好的，所以我尝试使用 addEventListener 函数制作此页面，以解决单击按钮的问题；它没有用。我通过删除除侦听器所需的基本元素之外的所有内容来缩小范围，并留下以下内容：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function init(){
document.getElementById("test").addEventListener("mousedown", function(){
alert("Test successful");
});
}
body.onload = init();
</script>
</head>
<body>
<button id="test">Click</button>
</body>
</html>
which didn't work either, so I know the issue is in my syntax of the above. Mind you, when I took away body.onload = init();and instead put onload="init()"into the body tag, it did work :O Problem is, I don't want to have it inline. Any suggestions?
这也不起作用，所以我知道问题出在我上面的语法中。请注意，当我拿走body.onload = init();并放入onload="init()"body 标签时，它确实有效：O 问题是，我不想让它内联。有什么建议？
Note: Do bear in mind that this question is notabout how there is a bug in JS, even if the title may suggest so, it is about how I can't get it to work since I've probably got the syntax wrong. Please feel free to rename it if you wish.
注意：请记住，这个问题与 JS 中如何存在错误无关，即使标题可能如此暗示，它也是关于我如何无法使其工作，因为我可能语法错误。如果您愿意，请随意重命名。
回答by Mattias Buelens
First of all, you should access the body element through document.body. However, onloadis defined on window, so you actually need:
首先，您应该通过document.body. 但是，onload在 上定义window，因此您实际上需要：
window.onload = init();
However, that would execute the init()method and store the return value in window.onload. Obviously, that's not what you want: you want the initfunction to act as onloadhandler. Therefore, you should have written:
但是，这将执行该init()方法并将返回值存储在window.onload. 显然，这不是您想要的：您希望init函数充当onload处理程序。因此，你应该写：
window.onload = init;
Although I'd recommend using addEventListenerfor that as well:
虽然我也建议使用addEventListener：
window.addEventListener("load", init);
回答by kennebec
body.onload = init();
body.onload = init();
Not the way to refer to body, use window instead- and don't call the method there, reference it (without parentheses)
不是引用 body 的方式，而是使用 window - 不要在那里调用方法，引用它（不带括号）
window.onload=init;
window.onload=init;
Pass the third argument, even if it is false-
传递第三个参数，即使它是假的——
function init(){
document.getElementById("test").addEventListener("mousedown", function(){
alert("Test successful");
},false);
}
And note that IE before version #9 does not support addEventListener.
请注意，版本 #9 之前的 IE 不支持 addEventListener。
回答by Danilo Valente
It happens because bodyis not defined, the correct is document.body.
Also, maybe the document.body is not defined yet because the headtag is rendered before the bodytag, so the better is to check when the windowor the documentis loaded.
Try this code:
发生这种情况是因为body未定义，正确的是 document.body。另外，可能 document.body 还没有定义，因为head标签在标签之前呈现body，所以最好检查何时加载window或document。试试这个代码：
function init(){
document.getElementById("test").addEventListener("mousedown", function(){
alert("Test successful");
});
}
document.addEventListener('load',init);//Or also, window.addEventListener
