布线元素事件-解网

问：

我最近读了一篇博文。在这篇文章中，作者告诉读者不要以内联方式连接所有事件，而是在 DOM 准备好时连接它们，就像这样（jQuery 示例）：onclick

<script type="text/javascript">
$(document).ready(function() {
    $("myElement").click(...
});
</script>

这适用于页面上附加了事件的所有元素。而那个脚本块，连同它的所有连接，都应该放在页面的末尾。

他说，将其设置为内联更难以维护：

<span id="myElement" onclick="...">moo</span>

但他没有说为什么。

在其他人的经历中是这样吗？这样做是更好的做法吗？它的优势是什么？

javascript html dom-events unobtrusive-javascript

评论

1赞 Sampson 12/31/2009

欢迎使用 StackOverflow。很棒的第一个问题！

答：

1赞 Sampson 12/31/2009 #1

只是乱七八糟。最好将逻辑与标记分开，就像应该将标记与样式分开一样。如果保持干净的分色，则管理代码会更容易，因为例如，您不需要通过标记来修改将鼠标悬停在图像上时发生的情况。

# index.html
<img class="thumbnail" src="puppies.jpg" />

# index.js
$("img.thumbnail").fadeTo(0, 0.5).hover(
  function () { $(this).fadeTo("fast", 1.0); },
  function () { $(this).fadeTo("slow", 0.5); }
);

# index.css
img.thumbnail { border:1px dotted red; }

1赞 SLaks 12/31/2009 #2

将所有事件处理程序放在一个位置可以使代码更易于维护，因为您不需要在 HTML 中搜索事件处理程序。它还允许您在处理程序中同时使用单引号和双引号，并且在分析脚本块时（而不是首次触发事件时）出现语法错误时会失败。

此外，每个内联事件处理程序都要求浏览器解析单独的表达式（相当于调用），从而损害性能。eval

评论

0赞 Mic 12/31/2009

难道您不认为在解析包含处理程序的 JS 文件时无论如何都会执行此 eval 操作吗？并给出相同的性能成本。

0赞 SLaks 12/31/2009

是的，但这样一来，你只能得到一个，而不是每个处理程序都有一个单独的。evaleval

0赞 SLaks 12/31/2009

每个都会产生很大的设置成本。eval

0赞 Mic 12/31/2009

我的猜测是，这些多个内联评估比遍历 DOM 并在以后附加事件更快。你做了一些测试吗？

0赞 SLaks 12/31/2009

不，我没有，但是设置 Javascript 解释器很昂贵;遍历 DOM 并不是那么昂贵。如果你能证明我错了，请这样做。

2赞 Pekka 12/31/2009 #3

好吧，通常认为尽可能地将代码和内容彼此分开是一种很好的风格。如果你使用这种方法，你就得到了非常干净的 HTML：

<span id="myElement">moo</span>

以及一个单独的中央代码存储库，您可以将其保存在一个地方，甚至可以放入外部 Javascript 文件中。

编辑 HTML 布局变得非常有趣，而且看起来也很棒。

我自己并不总是严格遵守这条规则，而且我不像其他人那样热心。但是在内联做事时，我允许自己最多进行函数调用。任何更复杂的东西都会很快变成代码汤。onclick='do_stuff()'

0赞 Chandra Patni 12/31/2009 #4

阅读这篇关于行为分离的文章，它解释了禁用 JavaScript 时的优雅降级。您还可以找到有关不显眼的 JavaScript 的文章，以了解 jQuery 的精神。

1赞 Ravi Vanapalli 12/31/2009 #5

优点是，如果您的页面嵌入了许多控件（ASCX），则不必在不同的控件（ASCX）或 Page 中搜索由 html 控件生成的事件。

如果事件是使用 Firebug 或其他调试器注册的，您甚至可以进行调试。

0赞 unomi 12/31/2009 #6

此外，如果使用事件冒泡，则可以避免使用大量事件处理程序。

0赞 Mic 12/31/2009 #7

对我来说，内联事件的一个优点是，只需检查元素，就可以直接看到执行操作时会发生什么。

如果您维护旧代码或由其他人完成，这将特别快。

另一个优点是速度，以后附加事件使用 DOM，它可能不如内联生成快。

通过使用像 PURE 这样不显眼的模板引擎，你可以保持 HTML 没有任何 JS 逻辑

上一个：我们如何在aspx页面的母版页中执行重置功能？

下一个：布线元素事件