javascript - 正确的 JavaScript 等价于

Question

什么是正确的 JavaScript 替换方式<body onload="init();">，记住我们不再需要支持非常旧的浏览器。

就我而言，我想为所有标签添加一个 onClick 事件，并希望将 Javascript 与我的 HTML 页面分开。

window.onload = init();

从这个开始，但发现全局文档对象在内部不可用init()，这似乎是一个时间问题。它在旧浏览器中运行得更好吗？

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

似乎是一种更现代的可靠方式，但所有现代浏览器都支持吗？

然后有人建议将 init() 放在页面底部，但这显然是回到让 Javascript 直接在 HTML 中。

<script type="text/javascript">init();</script>

有没有明确的方式我应该运行我的初始化代码？

score 0 · Accepted Answer

最简单的方法是在正文末尾添加一个带有自调用匿名函数的脚本标记：

<body>

<!-- content here -->

<script type="text/javascript">
(function() {
    //Run init code here
})();
</script>
</body>

对于外部 js 文件：

<body>

<!-- content here -->

<script src="main.js" type="text/javascript"></script>
</body>

main.js 文件：

(function() {
    //Run init code here
})();

score 0 · Accepted Answer

我认为您想要的是$(function(){}), or $(document).ready(...)，正如Marc B所提到的。除非我误解了您的问题，否则这似乎可以完成您的要求。jQuery API支持这一点。

.ready() 方法提供了一种在页面的文档对象模型 (DOM) 变得可以安全操作时立即运行 JavaScript 代码的方法。

score -1 · Accepted Answer

现在额外括号的问题已经解决了，我要测试的最终解决方案是：

if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init);
} else {
  window.onload = init;
}

我知道 JQuery 可以使用它的 .ready 事件来做到这一点，但其中一些页面是非常小的 Ajax 内容页面，如果没有必要，我更愿意避免 JQuery 的开销。

3 回答 3