Javascript加载vs ready vs domready vs DOMContentLoaded事件

我对“启动”事件有点迷茫——有太多不同的事件，在DOM和各种框架（如jQuery）中的命名也不同。所有可能的启动事件是什么？它们有何不同？你能展示一个简单的时间线来演示这些事件的触发顺序吗？

写下不同的框架及其事件可能会很有趣：

下面是使用JSFIDLE的测试系列。相同的html，不同的框架，不同的

ms

Dojo工具包

dojo.addOnLoad(function() {
    //do stuff
});

尤伊

原型

document.observe("dom:loaded", function() { 
    //do stuff
});

森查JS

Ext.onReady(function() {
    //do stuff
});

---

最好从您想要什么以及支持哪些浏览器的角度来考虑

要在文档对象模型（DOM）中进行操作，您必须确保HTML页面通过网络加载并解析到树中。解决这一问题的一种方法是在HTML文件的末尾编写所有代码，这将导致仅在解析HTML后处理这些javascript。另一种较新的标准方法是侦听DOMReady或DOMContentLoaded事件或ready事件，以确保处理程序仅在DOM就绪后运行

构建DOM树后，浏览器将请求图像、音频、视频等。加载所有这些资源后，启动窗口load事件，现在页面已准备好完全呈现

因此，基本上，您应该考虑是否可以在DOM树就绪的情况下执行代码，或者是否需要加载所有内容来运行代码。如果DOM ready的本机javascript实现没有涵盖您需要支持的所有浏览器，那么您可以选择jQuery DOMready，这就是为什么要这样做的原因。

.ready（） 当 页面被呈现时，直到所有资源 如图像已完全接收。在大多数情况下 只要DOM层次结构完全完成，就可以运行脚本 构建。传递给.ready（）的处理程序保证 在DOM准备好后执行，因此这通常是执行的最佳位置 附加所有其他事件处理程序并运行其他jQuery代码。使用时 脚本依赖于CSS样式属性的值，这一点很重要 在之前引用外部样式表或嵌入样式元素 引用脚本

如果代码依赖于加载的资产（例如 图像的尺寸是必需的），代码应放在 而不是加载事件的处理程序

.ready（）方法通常与属性不兼容。如果必须使用load，则不要使用.ready（） 或者使用jQuery的.load（）方法将加载事件处理程序附加到 窗口，或指向更具体的项目，如图像

参考：

.load（） 此方法是.on（“加载”，处理程序）的快捷方式

加载事件在元素和所有子元素都已加载时发送到元素 我的行李已经装满了。此事件可以发送到任何元素 与URL关联：图像、脚本、帧、iFrame和 窗口对象

通常，不必等待所有图像完全恢复 加载。如果代码可以提前执行，通常最好将 它位于发送到.ready（）方法的处理程序中

参考：

GlobalEventHandlers.onload 加载事件在文档加载过程结束时激发。在 此时，文档中的所有对象都在DOM中，并且 图像和子帧已完成加载

还有一些特定于Gecko的DOM事件，如DOMContentLoaded和 DOMFrameContentLoaded（可以使用 EventTarget.addEventListener（）），在 页面已构建，但不要等待其他资源完成 完成装载

跨浏览器回退

Internet Explorer 8支持readystatechange事件，该事件可以是 用于检测DOM是否已就绪。在早期版本的Internet中 在浏览器中，可以通过定期尝试执行来检测此状态 document.documentElement.doScroll（“左”）；，这段代码将抛出 在DOM准备就绪之前发生错误

jQuery等通用JS库提供跨浏览器功能 方法来检测DOM是否已就绪。还有独立的 提供此功能的脚本：contentloaded.js（仅支持一个 listener）和jquery.documentReady.js（不依赖于jquery， 尽管它的名字）。裁判：

代码：

---

时间线演示：

一般来说，Previousus的答案非常好且完整。 但是.ready（）和DOMContentLoaded事件之间存在一个重要区别

大多数浏览器都以浏览器的形式提供类似的功能 DOMContentLoaded事件。但是，jQuery的.ready（）方法在以下方面有所不同 一个重要且有用的方法是：如果DOM准备就绪，浏览器 在代码调用之前激发DOMContentLoaded 函数处理程序仍将被执行。相比之下，一个 事件激发后添加的DOMContentLoaded事件侦听器永远不会被删除 执行

参考文献

正如我们从中看到的，.ready（）在所有情况下都至少执行一次

例如，在浏览器控制台中，我们可以定义

>> function sample()
{
  console.log('This is sample.');

  $( document ).ready(function ()
  {
    console.log("Ready is working in all cases.")
  });  
}
undefined

结果我们得到了

>> sample();
undefined
This is sample. debugger eval code:3:11
Ready is working in all cases. debugger eval code:7:13
>> sample();
undefined
This is sample. debugger eval code:3:11
Ready is working in all cases. debugger eval code:7:13

---

感谢毫秒，但我更愿意理解这个原则——如果事件基本上是相同的还是不同的，以及它们是在什么时候相对于文档中的真实事件触发的。

Ext.onReady(function() {
    //do stuff
});

document.addEventListener("DOMContentLoaded", function (event) {
    console.log("DOM fully loaded and parsed");
});

function load() {
    console.log("load event detected!");
}
window.onload = load;

$(document).ready(function () {
    console.log('ready');
});

$(window).load(function () {
    console.log('loaded');
});

>> function sample()
{
  console.log('This is sample.');

  $( document ).ready(function ()
  {
    console.log("Ready is working in all cases.")
  });  
}
undefined

>> sample();
undefined
This is sample. debugger eval code:3:11
Ready is working in all cases. debugger eval code:7:13
>> sample();
undefined
This is sample. debugger eval code:3:11
Ready is working in all cases. debugger eval code:7:13