简单的事件监听器无法正常工作 - JS

Question

简单的事件监听器无法正常工作 - JS

use*_*377 5 html javascript dom addeventlistener

我已经编写了一个简单的简单事件监听器,但它却出现了错误: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>

Run Code Online (Sandbox Code Playgroud)

(我知道在此之后我会感到愚蠢,但我是一个JS菜鸟)

Answer 1

Pla*_*ato 13

在脚本执行时,尚未创建DOM.您可以在阅读html之后将脚本放在body标签之后运行它 - 但更好的方法是通过监听DOMContentLoaded.

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

Run Code Online (Sandbox Code Playgroud)

window.onload = init也有效.我不喜欢它,因为它看起来像一个脚本可以覆盖window.onload成为它自己的init函数.(我还没有确认是否发生了这种情况)

归档时间：	12 年，4 月前
查看次数：	25108 次
最近记录：	12 年，4 月前