Javascript:注册事件处理程序的最佳位置

Question

这个问题是如此基本,我肯定必须是某些东西的复制品,即使我已经找到了类似的东西.

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

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

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

但这与现代网络开发中逻辑和内容分离的压倒性进程背道而驰.因此,在2012年,所有逻辑/行为都应该在纯Javascript代码中完成.这很好,它会导致更易于维护的代码.但是你仍然需要一些初始钩子,用你的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 准备好时触发它。