Question

这个问题是如此基本，我确信必须是某事的副本，即使我looked for something similar。

我的问题基本上是：最初为HTML元素注册事件处理程序的最佳位置？

注册事件处理程序的最简单方法显然是内联：

<div id = "mybutton" onclick = "doSomething()">Click me</div>

但这与现代网络发展中逻辑和内容分离的压倒性进程背道而驰。因此，在2012年，所有逻辑/行为都应该在纯Javascript代码中完成。这很好，它会导致更易于维护的代码。但是你仍然需要一些初始的 hook ，用你的Javascript代码将HTML元素连接起来。

通常，我只是做一些事情：

<body onload = "registerAllEventHandlers()">

但是......那仍然是“作弊”，不是吗 - 因为我们仍然在这里使用内联Javascript。但我们还有其他选择吗？我们无法在<script>部分的<head>标记中执行此操作，因为此时我们无法访问DOM，因为页面尚未加载：

<head>
<script type = "text/javascript">
    var myButton = document.getElementById("mybutton"); // myButton is null!
</script>
</head>

我们是否在页面的底部上放置了<script>标记？像：

<html>
<body>
...
...
<script type = "text/javascript">
   registerAllEventHandlers();
</script>
</body>
</html>

这里的最佳做法是什么？

Answer 1

您可以使用window.onload：

<script type = "text/javascript">
  window.onload = registerAllEventHandlers;
</script>

或者如果您使用jquery：

$(registerAllEventHandlers);

使用onload可以正常工作，因为它会立即注册onload事件，但在DOM就绪时会触发它。

Answer 2

我有a similar answer这个，但一般是JavaScript。但这个想法仍然是相同的 - 在关闭身体之前加载脚本。

利用抽象window.onload和DOM ready事件的库。这样，您可以在DOM准备好后立即加载脚本。

Answer 3

您应该在DOM准备就绪后立即注册您的事件处理程序。在所有浏览器中检测这一点并不总是那么容易，尽管除了IE 8（及更早版本）之外，最广泛使用的浏览器现在支持DOMContentLoaded事件（感谢gengkev指出这一点）评论）。

这实际上相当于在registerAllEventHandlers末尾调用body函数，但它的优势在于您无需在HTML中添加任何JavaScript。

它明显优于使用window.onload，因为只有在页面的所有资源（图像，CSS等）都已加载后才会执行。

如果您正在使用其中一个主要的JavaScript框架，那么即使在旧版本的IE中，您也可以非常轻松地检测DOM何时就绪。使用 jQuery ，您可以使用ready event：

jQuery(document).ready(function () {
    // Your initialisation code here
});

或简写：

jQuery(function() { … });

使用原型，您可以使用dom:loaded event：

document.observe("dom:loaded", function() {
    // Your initialisation code here
});

Answer 4

就个人而言，将onlclick="doSomething();"添加到元素中没有问题。没有逻辑，只是一个函数调用。

所有逻辑都应该是：在HEAD中定义的函数或单独的文件中。

告诉我将href="somepage.html"甚至href="somepage.html#someanchor"添加到A标记时的区别。