Question

我在“启动”事件中有点迷失 - 有很多不同的事件，并且在DOM和各种框架（如jQuery）中命名不同。所有可能的启动事件是什么？他们有什么不同？您能否展示一个简单的时间表来证明这些事件的触发顺序是什么？

Answer 1

。就绪（）

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

在代码依赖于加载的资产的情况下（例如，如果   图像的尺寸是必需的），代码应放在一个   改为加载事件的处理程序。

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

参考：http://api.jquery.com/ready/

.load（）

此方法是.on（“load”，handler）的快捷方式。

当load元素和所有子元素都有时，load事件被发送到元素   已完全装满。此事件可以发送到任何元素   与URL相关联：图像，脚本，框架，iframe和   窗口对象。

通常，没有必要等待所有图像完全   加载。如果代码可以提前执行，通常最好放置   它在发送到.ready（）方法的处理程序中。

参考：http://api.jquery.com/load-event/

GlobalEventHandlers.onload

加载事件在文档加载过程结束时触发。在   至此，文档中的所有对象都在DOM中，而且都是   图像和子帧已完成加载。

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

跨浏览器后备广告

Internet Explorer 8支持readystatechange事件，可以是   用于检测DOM已准备就绪。在早期版本的Internet中   资源管理器，可以通过定期尝试执行来检测此状态   document.documentElement.doScroll（“left”）;,因为这个片段会抛出   在DOM准备好之前出错。

jQuery等通用JS库提供跨浏览器   检测DOM已准备好的方法。还有独立的   提供此功能的脚本：contentloaded.js（仅支持一个   listener）和jquery.documentReady.js（不依赖于jQuery，   尽管它的名字）。参考：   https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

代码：

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');
});

时间线演示：http://jsfiddle.net/HgJ33/

Answer 2

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

这是使用jsFiddle的测试系列。相同的html，不同的框架，ms中的差异。

Mootools

window.onload = function () {
    var now = new Date().getTime() - time;
    console.log(now, 'onload')             // 14 ms
};
window.addEvent('load', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'load')               // 15 ms
});
window.addEvent('domready', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'domready')           // 1 ms
});

jQuery

window.onload = function () {
    var now = new Date().getTime() - time;
    console.log(now, 'onload')             // 20 ms
};
$(document).on('DOMContentLoaded', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'DOMContentLoaded')   // 10 ms
});
$(document).on('ready', function () {
    var now = new Date().getTime() - time;
    console.log(now, 'ready')              // 20 ms
});

Dojo Toolkit

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

锐

YUI().use('*',function(Y) {
    Y.on("domready", function() {
        //do stuff
    }, Y, "The DOMContentLoaded event fired.  The DOM is now safe to modify via script.");
});

原型

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

Sencha JS

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

Answer 3

最好从您想要的角度和支持哪些浏览器的角度进行思考。

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

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

所以基本上你应该考虑是否可以在DOM树准备好的情况下执行代码，或者是否需要加载所有代码来运行代码。如果DOM的原生javascript实现不能覆盖您需要支持的所有浏览器，那么您可以选择jQuery DOMready，这就是它的原因。

Answer 4

总的来说，预先的回答是非常充分的。但是.ready（）和DOMContentLoaded事件之间存在一个重要区别。

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

参考https://api.jquery.com/ready/

由此可见， .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

Javascript加载vs ready vs domready vs DOMContentLoaded事件

4 个答案:

。就绪（）

.load（）

GlobalEventHandlers.onload