2

有一个关于 jQuery 和良好使用的问题我问了自己一段时间。$(documemt).ready()在 DOM 事件处理程序中通过 jQuery 设置事件处理程序与在 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()函数中放置太多代码有一种不好的感觉。

4

3 回答 3

2

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

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

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

于 2013-09-26T11:30:32.150 回答
2

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

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

于 2013-09-26T11:37:11.010 回答
1

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

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

于 2013-09-26T11:36:26.800 回答