Question

document.ready用于在DOM完全加载后执行代码。这可用于将事件处理程序附加到页面上的元素，例如

$(function(){ 
    $('#somediv').click(function(){ 

    }); 
}) 

<div id="somediv"> </div>

在内部，jQuery最多挂钩DOMContentLoaded和window.onload作为后备。 ~~在IE的情况下an attempt is made to scroll the viewport over and over until successful~~ 。

我有几个问题，我的第一个问题是，当将事件处理程序绑定到document本身时，是否有必要将该代码放在document.ready中？我一直在编写下面的代码而不将其包装在document.ready

中

$(document).keydown(function(e){
    if (e.which == 39) { 
       alert( "right arrow pressed" );
       return false;
    }
});

正如你所看到的那样，works。我的理解是，由于此代码不会连接到文档中的任何元素，而是文档本身，因此无需将其包装在document.ready处理程序中。我不包装它的另一个原因是因为我曾经在vanilla javascript中做同样的事情，相当于下面的代码，也是works。

document.onkeydown = function(){
var keyCode = event.keyCode || event.which;   
    if (keyCode == 39) { 
       alert( "right arrow pressed" );
       return false;
    }
}

我已经看过很多帖子，人们用document.ready将其打包，是否有任何缺点未在document.ready中包含此代码？

此外，我认为这个问题源于我在构建DOM时发生的事情缺乏清晰度，所以如果有人能够解释在DOM准备好之前的那段时间发生的事情。对于我来说，当解析html并将其转换为DOM树时，文档是 ready ，还是有更多内容？

总之，这是我的问题

将事件处理程序绑定到document本身时，是吗？必须将该代码放入document.ready。
没有将代码包装在document.ready？
在document.ready被解雇之前，构建文档时会发生什么样的事件？

Answer 1

如果您绑定到文档本身，则无需等到文档准备就绪。在这种情况下，不应该将它包装在document.ready中。

当浏览器触发DOMReady事件时，或者当不支持DOMReady事件的浏览器版本的特定测试成功时，<。> document.ready会被触发。

其他信息。 （5/22/12）

大多数现代浏览器实现DOMContentLoaded事件，该事件在文档上定义的所有元素都可以通过javascript操作时触发。其他浏览器依赖于setTimeout循环，该循环不断检查文档的readystate或直接绑定到文档的onreadystatechanged方法（取自jquery core）。在执行javascript之前，文档本身已经准备好进行操作，因此在直接绑定到文档时永远不需要等待。

这里唯一的问题是，如果代码与文档以外的元素交互，则有可能在文档存在之前在文档上触发事件。这不太可能发生，但它可能发生。如果您的代码可能会发生这种情况，那么将它放在$(document).ready()中以防止出现这种情况是有意义的。您的样本不保证被放置在$(document).ready()内。

Answer 2

$(document).ready的要点是在整个文档被解析后执行代码。

如果您想使用尚不存在的元素，您只需要使用它（例如，如果您的脚本位于<head>）

如果您使用的元素已经存在（或者因为它们是全局的，或者因为<script>低于它们），您不需要它。

Answer 3

在document.ready块中没有将事件绑定到文档的唯一缺点是可以在加载所有页面内容之前触发事件，这可能不是您想要的。

Answer 4

当DOM层次结构完全时，会触发此事件构造，即所有资产~~，如图像~~已完全接收。

你问：

将事件处理程序绑定到文档本身时，是否需要将该代码放入document.ready中？
- 回答：没有。使用依赖于CSS样式属性值的代码时，在引用代码所在的脚本或document.ready()阻止之前引用外部样式表或嵌入样式元素非常重要。

没有将代码包装在document.ready中的缺点吗？
- 回答：不。但是当你要使用JavaScript在文档中创建元素时，应该等到你的DOM准备好了。为此，您应该将代码放在document.ready()块中。

在构建文档之前，在文档.ready之前发生了什么样的事件序列？
- 回答：在document.ready被触发之前，浏览器已触发DOMContentLoaded。

Answer 5

当对元素使用动作或调用它们（将在DOM中生成或尚不存在）时，您需要使用$(document).ready

Answer 6

除了答案之外：你可以使用jquery live 函数（而不是keydown等）来摆脱“DOM元素必须完成”的情况。

所以接下来必须正常工作：

$( "#somediv" ).live( 'keydown', function(){ ... } );

在这种情况下，jQuery会在可能的情况下绑定事件。您不必将所有绑定放在一个（ ready ）函数中，您的绑定可以放在HTML页面的独立部分或Javascript文件中。

因此，结果答案是：不，当您使用提到的函数时，您不需要将代码放在document.ready中。

<强>更新

在 jQuery （＆gt; = 1.7）的最新版本中，使用on()函数而不是live()，因为最后一个版本已被删除。因此，没有必要将事件绑定放入ready（）。

Answer 7

<强> 1。将事件处理程序绑定到文档本身时，是否有必要将该代码放在document.ready中？

没有。事实上，在JQ中绑定的'on'方法可以委托给文档，这样你就可以在任何元素上安全地使用它们，只要没有大量的冒泡停止在带有stopPropagation的容器元素上。

<强> 2。没有将代码包装在document.ready中的缺点吗？

只有头部中的脚本可能会尝试点击尚未存在的HTML。相反的是，HTML可能已经准备好并且在doc之前从用户那里获取事件。看看'on'方法或谷歌'事件委托'是否有你的蛋糕，并且在有关事件时也要吃它（警告是愚蠢地使用stopPropagation的图书馆）。 document.ready主要是一种确定在HTML准备好被击中时你的代码被触发的方法。除非（可能）你用某些东西击中身体本身，否则代码不必落在身体标签的底部。

第3。文档构建之前，在文档.ready之前发生了什么样的事件序列？

在触发文档就绪时，已解析所有标记并已建立布局维度。图像不需要完全加载，我只是猜测，但我怀疑非布局影响CSS在某些浏览器中可能尚未生效。当HTML解析器读取并执行其结束标记时，该元素被视为“就绪”。在HTML解析可以继续之前，脚本标记中的JS必须由解释器处理，这就是为什么我们现在倾向于将代码放在doc的底部，以便更快地感知加载时间。

这段代码是否需要在document.ready中？

7 个答案: