javascript - 此代码是否需要在 document.ready 中？

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 。

我有几个问题，第一个问题是，在将事件处理程序绑定(bind)到 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 树时，文档就绪，或者还有更多内容？

总结一下，这是我的问题

1. 将事件处理程序绑定(bind)到 document 本身时，是不是 有必要将该代码放入 document.ready。
2. 不将代码包装在 document.ready 中有什么缺点吗？
3. 在构造文档时，就在触发 document.ready 之前，发生了哪些事件？

Answer 1

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

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

其他信息。 (5/22/12)

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

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