$(document).ready(initialize)和$(document).on('ready', initialize)之间有什么区别？

Question

什么是以下两者之间的区别：

$(document).ready(initialize); 

和

$(document).on('ready', initialize); 

在我看来，它们似乎以相同的方式工作。

- Lorraine Bernard

---

一个方法直接使用，另一个通过辅助方法进行代理。 - Sampson

Answer 1

$(document).on('ready',initialize);如果文件执行时DOM已经准备好，它将无法起作用。

$(document).ready()对此有特殊处理：确保总是调用它。

- antonjs

---

后者也与jQuery对象的内容无关。因此，目前$().ready()和$('foo').ready()是完全相同的东西。 - ThiefMaster

对我来说，人们似乎总是不懂的情况下就会选择 +1，这让我感到有些困惑。 - Ahmad Alfy

Answer 2

TL;DR

• $(document).on('ready', ...)已被弃用，因为它不会执行在DOM完全解析后绑定的回调函数。它将事件对象作为第一个参数。

• $().ready()将jQuery的引用作为第一个参数传递。

---

详细答案

$(document).on('ready', initialize);

这个表达式将一个ready事件处理程序绑定到document，就像你从任何其他事件处理程序中预期的那样。使用它来监听DOM准备好了是已被弃用的，自jQuery 1.8以来：

还有$(document).bind("ready", handler)，自jQuery 1.8以来已被弃用。这与ready方法类似，但如果ready事件已经触发，并且您尝试.bind("ready")，则不会执行绑定的处理程序。通过此方式绑定的Ready处理程序在上面三种方法绑定的处理程序之后执行。

请注意，ready是一个自定义事件，并由jQuery内部触发。这也意味着您可以手动触发它，这可能会引起问题。

---

$(document).ready(initialize);

这个表达式实际上并没有绑定事件处理程序。jQuery.fn.ready是一个专门的方法，用于在DOM完全解析后注册要运行的回调函数。jQuery将回调添加到一个promise对象中，无论您向$传递哪个选择器都没有关系。

此外，回调函数将引用传递给jQuery对象，而不是事件对象。

---

以下部分的源代码很好地展示了像这样注册的回调函数是如何处理的：

// If there are functions bound, to execute
readyList.resolveWith(document, [jQuery]);

// Trigger any bound ready events
if (jQuery.fn.trigger) {
    jQuery(document).trigger("ready").off("ready");
}

- Felix Kling