理解javascript中的流

对JS非常陌生，只是在玩我从一本书中写的例子。 使用下面的代码-为什么我的函数没有被执行？我正在呼叫他们，语法是正确的。如果我放置document.addEventListener（“DOMContentLoaded”，init，false）； 然后将执行init（）函数，但不执行test（）函数

对于document.addEventListener应该放在哪里，以及它对于init函数的确切含义，我也感到困惑。是否应该始终首先调用init（）函数？init（）函数中通常包含什么

提前谢谢。代码如下

function init() {
    var panel = document.getElementById("panel");
    panel.innerHTML = "Hello World";
}


function test() {
    var panel = document.getElementById("panel");
    panel.innerHTML = "See ya";

}
init();
test();

---

您可能正在加载DOM元素之前执行这些函数。这一页是从上到下阅读的。如果函数在读取HTML之前执行，则元素将不存在

许多开发人员将脚本作为正文中的最后一个元素来避免这种情况

或者使用onload处理程序，如下所示

window.onload = function () {
  init();
  test();
}

这些函数不需要在处理程序中定义

---

编辑。同样，您正在将数据写入同一个元素，因此只有第二个函数具有您可以看到的结果。您可以写入一个单独的元素，或者按照一个答案的建议将数据添加到一起。

听起来像是在调用这些方法，但它们会引发错误，因为它们是在DOM加载完成之前调用的。在正常情况下，像这样的脚本会在浏览器到达时立即执行，因此如果在加载DOM之前发生这种情况（通常是这样），则对document.getElementById（）的调用将失败，因为文档尚未加载

您对document.addEventListener（“DOMContentLoaded”，init，false）的调用已接近完成；-这告诉浏览器在加载DOM时调用init。但是，在本例中，您只调用init，因此不会调用test（）

我建议删除对init（）的内联调用；和test（）；，然后添加以下内容：

function onLoaded(){
    init();
    test();
}

然后从事件侦听器调用onLoaded：

document.addEventListener ("DOMContentLoaded" , onLoaded , false); 

---

你怎么知道这些函数没有被执行？整个文档是什么样子的？JavaScript控制台中是否显示了任何错误？JSFIDLE是有用的，因为当我加载html页面时，它是空白的，您大多数问题的答案是“这取决于您使用它的时间”。@DJC-这并不意味着函数没有执行。它可能正在执行，然后抛出错误。完全同意。您还可以绑定到body标记的onload函数。；）嗨，杰夫曼，谢谢你-你说得对-我把脚本标签移到了正文部分的末尾，它成功了。然而，这是最好的做法吗？因为我在过去几周使用了一些在线教程，我想他们说要把它放在标题部分？@abc123-不，你不能。body元素的

onload

属性映射到文档的onload事件上。我看过的大多数教程和书都把这些东西放在了头上。我通常也这样做。如果我真的需要速度，我有时会在受影响的DOM元素之后立即放置一些脚本。@Quentin这对我来说很好您没有删除eventListener…如果您要推荐这条路，请确保显示删除eventListener很重要，否则会导致内存泄漏。我不认为这是首选解决方案。@abc123-如果函数引用了绑定到的元素，并且正在使用IE，则最终会导致内存泄漏。仅使用

addEventListener

不会导致内存泄漏。这是首选的方法。@Quentin在阅读更多内容后，你绝对正确！谢谢你们拓宽了我的知识面。谢谢你们两位，我也学到了一些新东西。