5

这个问题是如此基本，我敢肯定 in must be a duplicate of something，即使我已经寻找类似的东西。

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

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

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

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

通常，我只是做类似的事情：

<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>

这里的最佳做法是什么？

4

4 回答 4

2

您可以使用window.onload：

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

或者，如果您使用：

$(registerAllEventHandlers);

使用onload是有效的，因为它会onload立即注册事件，但会在 DOM 准备好时触发它。

于 2012-05-27T14:23:03.090 回答
0

我对此有类似的回答，但总体上是关于 JavaScript 的。但是思路还是一样的——在关闭正文之前加载脚本。

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

于 2012-05-27T14:23:19.400 回答
0

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

这本质上等同于registerAllEventHandlers在body您的 .

它比使用要好得多，window.onload因为直到所有页面的资产（图像、CSS 等）都加载后才会执行。

如果您使用主要的 JavaScript 框架之一，那么您可以很容易地检测到 DOM 何时准备就绪，即使在旧版本的 IE 中也是如此。使用jQuery，您将使用该ready事件：

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

或简写：

jQuery(function() { … });

使用原型，您将使用dom:loaded事件：

document.observe("dom:loaded", function() {
    // Your initialisation code here
});
于 2012-05-27T14:27:23.797 回答
0

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

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

href="somepage.html"告诉我添加或什href="somepage.html#someanchor"至添加到 A 标签时有什么区别。

于 2012-05-27T15:24:41.680 回答