32

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

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

    }); 
}) 

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

在内部，jQuery 连接DOMContentLoaded并window.onload作为后备。在 IE 的情况下，尝试一遍又一遍地滚动视口，直到成功。

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

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

如您所见，它有效。我的理解是，由于此代码不与文档中的任何元素挂钩，而是与文档本身挂钩，因此无需将其包装在document.ready处理程序中。我不包装它的另一个原因是因为我曾经在 vanilla javascript 中做同样的事情，相当于下面的代码，它也可以工作。

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 树时， 文档就准备好了，或者还有更多内容吗？

总之，这是我的问题

  1. 将事件处理程序绑定到document自身时，是否有必要将该代码放在document.ready.
  2. 不将代码包装在 中是否有任何缺点document.ready？
  3. document.ready在构造文档时，在触发 之前，会发生什么事件序列？
4

7 回答 7

33

如果您要绑定到文档本身，则无需等到它准备好。在这种情况下，不将其包装在 document.ready 中应该没有任何缺点。

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

附加信息。 （2012 年 5 月 22 日）

大多数现代浏览器都实现了DOMContentLoaded事件，该事件在文档上定义的所有元素都准备好被 javascript 操作时触发。其他浏览器要么依赖 setTimeout 循环来不断检查文档的就绪状态，要么直接绑定到文档的 onreadystatechanged 方法（取自jquery core）。在执行 javascript 之前，文档本身已准备好进行操作，因此直接绑定到文档时无需等待。

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

于 2012-05-17T19:22:11.230 回答
11

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

仅当您想使用尚不存在的元素时才需要使用它。
（例如，如果您的脚本在 中<head>）

如果您正在使用的元素已经存在（因为它们是全局的，或者因为您<script>在它们之下），那么您就不需要它。

于 2012-05-17T19:22:47.353 回答
5

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

于 2012-05-17T19:21:42.117 回答
4

此事件在 DOM 层次结构完全构建时触发，即所有资产比如图片已完全收到。

您询问：

  • 将事件处理程序绑定到文档本身时，是否有必要将该代码放入 document.ready 中？
    • 回答：没有。document.ready()在使用依赖 CSS 样式属性值的代码时，在引用代码所在的脚本之前或在块之前引用外部样式表或嵌入样式元素非常重要。
  • 不将代码包装在 document.ready 中是否有任何缺点？
    • 回答：不。但是当您必须使用 JavaScript 在文档中创建元素时，应该等到您的 DOM 准备好。为此，您应该将代码放在document.ready()块中。
  • 在构造文档时，在 document.ready 被触发之前，会发生什么事件序列？
    • 答案：在 document.ready 被触发之前，DOMContentLoaded已经被浏览器触发了。
于 2012-05-21T12:36:07.457 回答
2

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

于 2012-05-17T19:26:59.850 回答
1

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

所以下一个必须正常工作：

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

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

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

更新

在jQuery (>= 1.7) 的最后一个版本中，使用on()函数而不是live()因为最后一个已被贬低。因此，没有必要将事件绑定放入 ready()。

于 2012-05-17T19:40:23.927 回答
1

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

不。事实上，JQ 中用于绑定的“on”方法可以委托给文档，因此您可以在任何时候安全地在任何元素上使用这些方法，只要在容器元素上使用 stopPropagation 不会停止很多冒泡。

2. 不将代码包装在 document.ready 中是否有任何缺点？

只有头部中的脚本可能会尝试访问尚不存在的 HTML。相反，HTML 可能在文档准备好之前就已经准备好并从用户那里获取事件。请参阅“on”方法或谷歌“事件委托”，以便在涉及事件的地方吃蛋糕和吃蛋糕（警告是愚蠢地使用 stopPropagation 的库）。document.ready 主要只是一种确定您的代码在 HTML 准备好被击中时触发的方法。除非（也许）您正在用某些东西击中 body 本身，否则位于 body 标签底部的代码没有必要。

3. 在构造文档时，在触发 document.ready 之前，会发生什么事件序列？

在 document ready 被触发时，所有标签都已被解析并且布局尺寸已被确定。图像不需要完全加载，我只是猜测，但我怀疑影响 CSS 的非布局可能在某些浏览器中尚未生效。当 HTML 解析器读取并执行元素的结束标记时，该元素被视为“就绪”。脚本标签中的 JS 必须由解释器处理，然后才能继续进行 HTML 解析，这就是为什么我们现在倾向于将代码放在文档底部的原因，以加快感知加载时间。

于 2012-05-24T15:12:56.820 回答