jQuery：绑定事件 - 在 $(document).ready 或 html DOM 事件处理程序中？ [关闭]答案

【问题标题】：jQuery: Binding events - in $(document).ready or html DOM event handler? [closed]jQuery：绑定事件 - 在 $(document).ready 或 html DOM 事件处理程序中？ [关闭]
【发布时间】：2013-09-26 11:27:37
【问题描述】：

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

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

• jQuery 方式 => `$(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() 函数中放入太多代码我有一种不好的感觉。

【问题讨论】：

您仍然可以使用外部脚本来设置所有逻辑并在关闭正文 TAG 之前加载此脚本（异步）
我怎样才能做到异步？

标签： javascript jquery events dom document-ready

【解决方案1】：

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

（请注意，通过 $(document).ready(function(){}); 方法我实际上更多地指的是您的示例中的事件绑定）

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

啊，这很有趣。不知道，单击内联脚本可能会出现错误。感谢您提供这些信息，也感谢@Douglas。这是 $(document).ready() 的一个很好的理由

【解决方案3】：

在显示网站的过程中也没有负载，只需单击即可，对吗？

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

【讨论】：

• jQuery 方式 => $(documemt).ready()

• html DOM 方式

问题：

• jQuery 方式 => `$(documemt).ready()`