我的 onload 侦听器似乎无法正常工作

Question

我知道我在这里遗漏了一些东西，但我的页面无法正常工作...

我有一个简单的 init() 函数绑定到 window.onload。 init() 正在触发，但我收到一个奇怪的错误，例如它无法读取 DOM 元素本身。我可以从控制台弹出 Firebug 和运行 init(); 并且确实正常工作。看来我没有使用正确的 onload 侦听器。有更好的吗？另外，这可能是由于我使用了 document.getElementsByClassName().

这是错误（然后我将 init() 放入控制台）：

这是我的相关代码：

... // There is more code, I just didnt include it.

  window.addEventListener("onload", init(), false);

  function init(){
    populateText();
    populateLinks();
    populateIcons();
  }

  function populateText(){
    var texts = document.getElementsByClassName("text");
    for (i = 0; i < data.links.length; i++) {
      texts[i].innerHTML = data.links[i].text;
    }
  }

  function populateLinks(){
    var links = document.getElementsByClassName("link");
    for (i = 0; i < data.links.length; i++) {
      links[i].href = data.links[i].link;
    }
  }

  function populateIcons(){
    var icons = document.getElementsByClassName("icon");
    for (i = data.links.length; i > 0; i--) {
      icons[(data.links.length-i)].src = "screens/screen ("+i+").png";
    }
  }
  </script>
</head>
<body>
  <div id='iconLinks'>
    <ul>
      <li>
        <a class="link" href="" target="_blank">
          <div class="text"></div>
          <img class="icon" src=""/>
        </a>
      </li>
      <li>
      <a class="link" href="" target="_blank">
        <div class="text"></div>
        <img class="icon" src=""/>
      </a>
    </li>
    <li>
      <a class="link" href="" target="_blank">
        <div class="text"></div>
        <img class="icon" src=""/>
      </a>
    </li>
    <li>
      <a class="link" href="" target="_blank">
        <div class="text"></div>
        <img class="icon" src=""/>
      </a>
    </li>
    <li>
      <a class="link" href="" target="_blank">
        <div class="text"></div>
        <img class="icon" src=""/>
      </a>
    </li>

... // There is more code, I just didnt include it.

Answer 1

您需要将函数引用传递给 addEventListener()。此外，事件名称是 load，而不是 onload。所以调用应该是这样的：

window.addEventListener("load", init, false);

（您也可以省略 false 作为第三个参数，因为这是默认值。）

在您的情况下，首先调用 init()，然后将其 return 值（即 undefined）传递给 onload 事件的处理程序。

Answer 2

如果您想加载函数直到整个 DOM 加载完成：

JS：

<script>
window.onload = function(){
  populateText();
  populateLinks();
  populateIcons();
}
</script>

JQuery：

$(window).on("load", function() {
  populateText();
  populateLinks();
  populateIcons();
})

我的 onload 侦听器似乎无法正常工作

My onload listener doesn't seem to be working

html

javascript

firebug

dom

event-listener