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

Javascript: Best place to register event handlers

本文关键字：最佳位置 程序 事件处理 注册 Javascript      更新时间：2023-09-26

这个问题太基本了，我确信一定是某物的重复，即使我寻找过类似的东西。

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

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

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

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

通常，我只是做这样的事情：

<body onload = "registerAllEventHandlers()">

但。。。这仍然是"作弊"，不是吗 - 因为我们仍然在这里使用内联Javascript。 但是我们还有什么其他选择呢？ 我们不能在<head>部分的 <script> 标签中执行此操作，因为此时我们无法访问 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>

这里的最佳实践是什么？

您可以使用

window.onload：

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

或者如果你使用 jquery：

$(registerAllEventHandlers);

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

我对此有类似的答案，但一般是关于JavaScript的。但想法仍然是一样的 - 在关闭正文之前加载脚本。

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

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

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

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

您应该在

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

这基本上等同于在body结束时调用registerAllEventHandlers函数，但它的优点是你不需要在HTML中添加任何JavaScript。

它比使用window.onload要好得多，因为在加载页面的所有资产（图像，CSS等）之前不会执行。

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

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

或速记：

jQuery(function() { … });

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

document.observe("dom:loaded", function() {
    // Your initialisation code here
});
相关文章：