jQuery：绑定事件 - 在$（document）.ready或html DOM事件处理程序中？

Question

有一个关于jQuery的问题和良好的使用我问自己一段时间。 在$(documemt).ready()中通过jQuery设置事件处理程序并在DOM事件处理程序中将其设置为HTML是否有区别？

为了让它更清晰一些：我不想通过向我的网站添加许多事件来获得更长的加载时间。 示例：我想添加ajax下拉列表以在我的论坛中显示新消息，而不是仅重定向到收件箱。我有两种方法可以做到这一点。

•jQuery way =＆gt; $(documemt).ready()

$(document).ready(function () {
    $(".new_messages_link").click(function (e) {
        e.preventDefault();
        // Ajax query an showing the dropdown
    });
});

在加载网站后，只需在jQuery中绑定事件处理程序。这里的问题是，点击仅在网站完全加载后才起作用。大图像的问题会导致网站速度变慢。

•html DOM方式

<a href="#" class="new_messages_link" onClick="show_new_messages(this); return false;">New Messages</a>

function show_new_messages(var element) {
    // Ajax query an showing the dropdown
}

这不是严格的编程，你需要更改html，如果你改变方法，但你不需要等待$(documemt).ready()。在显示网站时也没有负载，只要你点击，我是对的吗？

问题：

所以我的问题是，我该怎么用？什么是更好的，真正的区别是什么？有关信息，它不仅仅是我想要设置的一个事件处理程序，还有很多，因此加载时间很重要。 我不确定，我在$(documemt).ready()函数中放入太多代码时感觉不好。

Answer 1

如果您打算使用jQuery，那么您应该使用$（document）.ready（function（）{}）;方法。这称为“Unobtrusive Javascript”，允许您将业务逻辑/行为与演示文稿/标记分开。

（请注意通过$（document）.ready（function（）{}）;方法我实际上更多地引用你的例子中的事件绑定）

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

Answer 2

使用内联脚本可能会稍微快一点，但$(documemt).ready()方法更可靠，它可以通过在HTML和HTML之间提供分隔层来帮助您维护代码。 JS。

注意：如果尚未加载相关脚本，则内联函数可能仍无法在页面加载时使用。这可能会导致意外行为或错误。

Answer 3

  

在显示网站时也没有负载，只要你点击，我是对的吗？

单击该链接仅在show_new_messages脚本加载后才会起作用，因此如果您使用onclick属性，并且在脚本加载之前单击它们，您的用户可能会看到错误消息。在$(documemt).ready()中设置事件处理程序意味着在附加事件处理程序时，所有脚本也将加载，因此单击它将起作用。