此代码是否需要在document.ready中? [英] Does this code need to be in a document.ready?

问题描述

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

The document.ready is used to execute code after the DOM is fully loaded. This can be used to attach event handlers to elements on the page e.g

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

    }); 
}) 

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

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

Internally, jQuery hooks up to DOMContentLoaded and window.onload as a fallback. In IE's case an attempt is made to scroll the viewport over and over until successful.

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

I have a few questions, my first one being, when binding event handlers to the document itself, is it necessary to put that code in a document.ready ? I have always been writing the code below without wrapping it in a document.ready

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

如您所见，它可以正常工作.我的理解是，由于此代码不会链接到文档中的任何元素，而是文档本身，因此不需要将其包装在document.ready处理程序中.我没有包装的另一个原因是，我以前在香草javascript中做同样的事情，等效的是下面的代码，该代码也

And as you can see, it works. My understanding is, since this code doesn't hook up to any elements within the document, but the document itself, there's no need to wrap it in a document.ready handler. Another reason i don't wrap it is because i used to do the same in vanilla javascript the equivalent would be the code below, which also works.

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

我已经看到很多帖子，人们将其包装在document.ready中，是否有不将代码包装在document.ready中的不利之处?

I've seen numerous posts where people wrap it in a document.ready, is there any downside of not wrapping this code in document.ready ?

我还认为，这个问题是由于我不清楚在构建DOM的这段时间里发生了什么，所以如果有人可以解释在DOM准备就绪之前的这段时间里发生了什么.对我来说，当html被解析并转换为DOM树时，文档已经准备好了，或者还有更多内容吗?

Also i think this question stems from my lack of clarity of what happens during this time when the DOM is being constructed, so if someone can explain what happens during the period right before the DOM is ready. To me the document is ready when the html has been parsed and converted into a DOM tree, or is there more to it ?

总而言之，这是我的问题

In summary, here are my questions

1. 将事件处理程序绑定到document本身时，是否 必须将该代码放入document.ready.
2. 是否没有将代码包装在document.ready中的任何弊端?
3. 在构造文档时，恰好在触发document.ready之前发生什么事件序列?

1. When binding event handlers to the document itself, is it necessary to put that code in a document.ready.
2. Are there any downsides to not wrapping the code in the document.ready ?
3. What sequence of events take place when the document is being constructed, right before the document.ready is fired ?

推荐答案

如果要绑定到文档本身，则无需等待文档准备就绪.不将其包装在document.ready中没有任何不利之处.

If you are binding to the document itself, you don't need to wait until it is ready. There shouldn't be any downsides to not wrapping it in document.ready in this case.

document.ready.

document.ready gets fired when the DOMReady event is triggered by the browser, or when a specific test is successful for versions of browsers that don't support the DOMReady event.

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

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

Most modern browsers implement the DOMContentLoaded event which fires when all elements defined on the document are ready to be manipulated by javascript. Other browsers either rely on a setTimeout loop that continuously checks the readystate of the document or binds directly to the onreadystatechanged method of the document (taken from jquery core). The document itself is ready to be manipulated before javascript is ever executed, therefore you never need to wait when binding directly to the document.

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

The only gotcha here is that if the code interacts with elements other than the document, there is a chance that the event could be triggered on the document before those elements exist. It is very unlikely for that to happen, but it can happen. If that is something that can happen with your code, then it makes sense to place it inside of $(document).ready() to prevent that scenario. Your sample doesn't warrant being placed inside of $(document).ready().

这篇关于此代码是否需要在document.ready中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！