我最近读了一篇博文。在其中，作者告诉读者不要将所有onclick事件连接起来，而是在 DOM 准备好时连接起来，就像这样（jQuery 示例）：
<script type="text/javascript">
$(document).ready(function() {
$("myElement").click(...
});
</script>
这适用于页面上附加了事件的所有元素。那个脚本块，连同它的所有连线，都应该放在页面的末尾。
他说，将其设置为内联更难维护：
<span id="myElement" onclick="...">moo</span>
但他没有说为什么。
这在其他人的经历中是真的吗？这样做是更好的做法吗？它的优点是什么？
嗯，通常认为将代码和内容尽可能地分开是一种很好的风格。如果您使用该方法，您将拥有非常干净的 HTML：
<span id="myElement">moo</span>
以及一个单独的中央代码存储库，您可以将其保存在一个地方，甚至可以放入外部 Javascript 文件中。
编辑 HTML 布局变得非常有趣，而且看起来也很棒。
我自己并不总是严格遵守这条规则，我也不像其他人那样热衷于此。onclick='do_stuff()'但是在做内联的事情时，我允许自己最多调用一次函数。任何更复杂的东西都会很快变成代码汤。
优点是您不必在不同的控件 (ASCX) 或页面中搜索由 html 控件生成的事件，以防您的页面嵌入了许多控件 (ASCX)。
如果事件是使用 Firebug 或其他调试器注册的，您甚至可以进行调试。
这只是一团糟。最好将您的逻辑与您的标记分开，就像您应该将您的标记与您的样式分开一样。如果你保持干净的分离，管理代码会更容易，因为你不需要通过标记来修改当你将鼠标悬停在图像上时会发生什么。
# 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; }
将所有事件处理程序放在一个位置使代码更易于维护，因为您无需在 HTML 中寻找事件处理程序。它还允许您在处理程序中同时使用单引号和双引号，并且在解析脚本块而不是第一次触发事件时会因语法错误而失败。
此外，每个内联事件处理程序都需要浏览器解析一个单独的表达式（相当于一个eval调用），这会损害性能。
对我来说，内联事件的一个优势是您可以直接查看执行操作时会发生什么，只需检查元素即可。
如果您维护旧代码或由其他人完成，这将特别快。
另一个优点是速度，稍后附加事件使用 DOM，它可能不如内联生成快。
通过使用像PURE这样不显眼的模板引擎，你可以让你的 HTML 中没有任何 JS 逻辑
阅读这篇关于行为分离的文章，它解释了禁用 JavaScript 时的优雅降级。您还可以找到关于不显眼的 JavaScript 的文章，以了解 jQuery 的精神。
此外，如果您使用事件冒泡，则可以避免使用大量事件处理程序。