基本的 JavaScript EventListener 不起作用？答案

【问题标题】：Basic JavaScript EventListener NOT work?基本的 JavaScript EventListener 不起作用？
【发布时间】：2012-10-16 18:25:34
【问题描述】：

我正在尝试学习 JavaScript 的基础知识我不明白为什么这不起作用...它是如此基本？

<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    ul{
        list-style-type:none;
    }
    div{
        width:300px;
        height:200px;
        background-color:#0066cc;
    }
</style>

<script language="text/javascript"> 
    var testing = document.getElementById("addBtn");
    testing.addEventListener("click", function(e){ alert("test") } , false);
</script>

</head>
<body>
<ul id="placeholder"></ul>
<a href="#" id="addBtn">Add</a>
</body>
</html>

【问题讨论】：

如果你跳过基本的 Javascript 而学习 jQuery，这所以会容易得多。
@PaulTomblin 可能。但这也是可怕的建议是你想知道你真正在做什么。 slideshare.net/rmurphey/the-jquery-divide-5287573
@PaulTomblin “我正在努力学习 JavaScript 的基础知识”所以我不这么认为......
@AlexWayne，我在幻灯片中没有看到任何说明为什么你不应该学习 jQuery，只是说糟糕的程序员无论使用什么工具都会编写糟糕的代码。
@PaulTomblin 该演讲的寓意是学习 JavaScript，然后学习 jQuery 作为工具箱中许多工具之一。而不是只是学习jQuery。 jQuery 应该被视为一个 javascript 库，而不是一门完整的语言。没有 Java 就学不了 Struts，没有 Ruby 就学不了 Rails，没有 ObjectiveC 就学不了 UIKit。而且你不应该在没有 JavaScript 的情况下学习 jQuery。

标签： javascript

【解决方案1】：

addBtn 在您尝试访问时未加载。您应该在 DOM 加载后执行该操作，方法是将该代码移动到文件底部，或者通过 onload 事件：

window.onload = function() {
    var testing = document.getElementById("addBtn");
    testing.addEventListener("click", function(e){ alert("test") } , false);
}

【讨论】：

【解决方案2】：

当代码：

var testing = document.getElementById("addBtn");

开始运行，addBtn 元素尚未被解析。您可以做的一件事是将<script> 标记向下移动到页面底部。

您可以做的另一件事是在 onload 事件中运行代码。比如：

<script language="text/javascript">
   window.onload = function () {
      var testing = document.getElementById("addBtn");
       testing.addEventListener("click", function(e){ alert("test") } , false);
   };
</script>

【讨论】：

【解决方案3】：

除了使用window.onload（这是您问题的关键答案）之外，请考虑使用<script> 或<script type="text/javascript">，因为“语言”属性已被弃用。 More info here.

【讨论】：