addEventListener() 不工作答案

【问题标题】：addEventListener() not workingaddEventListener() 不工作
【发布时间】：2012-05-31 19:00:36
【问题描述】：

好的，所以我尝试使用 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>

这也不起作用，所以我知道问题出在我上面的语法中。请注意，当我拿走body.onload = init(); 而是将onload="init()" 放入body 标签时，它确实有效：O 问题是，我不想让它内联。有什么建议么？

注意：请记住，这个问题不是关于 JS 中如何存在错误的问题，即使标题可能暗示了这一点，它是关于我如何无法让它工作的问题因为我可能语法错误。如果您愿意，请随时重命名。

【问题讨论】：

标签： javascript addeventlistener

【解决方案1】：

首先，您应该通过document.body 访问body 元素。但是，onload 是在window 上定义的，所以你实际上需要：

window.onload = init();

但是，这将执行init() 方法并将返回值存储在window.onload 中。显然，这不是您想要的：您希望init 函数充当onload 处理程序。因此，你应该写：

window.onload = init;

虽然我也建议使用addEventListener：

window.addEventListener("load", init);

【讨论】：

第三种解决方案是迄今为止最好的 :) 谢谢。

【解决方案2】：

body.onload = init();

不是引用body的方式，而是使用window- 并且不要在那里调用该方法，引用它（不带括号）

window.onload=init;

传递第三个参数，即使是假的-

function init(){
     document.getElementById("test").addEventListener("mousedown", function(){
         alert("Test successful");
     },false);
}

注意，9 号之前的 IE 不支持 addEventListener。

【讨论】：

【解决方案3】：

这是因为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

【讨论】：

【解决方案4】：

<script>
        window.addEventListener('load', () => {
            document.getElementById('test').addEventListener("mousedown", (e) => {
                alert("Test successful");
            });
        })
</script>

【讨论】：