简单事件监听器不起作用 - JS

Question

简单事件监听器不起作用 - JS

13

我写了一个非常简单的事件监听器，但它仍然出现错误：Uncaught TypeError: Cannot call method 'addEventListener' of null。这可能与id有关（同时它可以使用document吗？）。

<html>
<head>
    <script type="text/javascript">
        function message () {
        alert("Hello!");
        }
        var button = document.getElementById('button');
        button.addEventListener('click', message, true);
    </script>
</head>
<body>
    <input type="button" id="button" value="Click me!" />
</body>
</html>

我知道之后看到这个会感到很蠢，但是我是JS新手。

- user2594377

将脚本部分放置在正文部分底部，紧靠着 </body> 标签之上。你所引用的元素尚未加载。 - Benjamin Gruenbaum

太好了！但我以为脚本放在头部？ - user2594377

在大多数情况下，将它们放在body部分底部是最佳实践 - 除非您希望它们在元素加载之前运行。 - Benjamin Gruenbaum

2个回答

2

因为这个脚本在body尚未加载时执行。请使用onload事件，并将您的代码粘贴在其中。

- user1882981

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Plato · Accepted Answer

在您的脚本执行时，DOM 尚未创建。您可以将脚本放置在 body 标签之后，以在读取 HTML 后运行它 - 但更好的方法是通过监听 DOMContentLoaded 来实现。

document.addEventListener('DOMContentLoaded', init, false);
function init(){
  function message () {
    alert("Hello!");
  }
  var button = document.getElementById('button');
  button.addEventListener('click', message, true);
};

window.onload = init 也可以使用。我不喜欢它，因为它让我觉得一个脚本可能会覆盖 window.onload 成为它自己的 init 函数。（我还没有确认是否发生了这种情况）