Ce code doit-il être dans un document.ready?

Question

L' document.ready est utilisé pour exécuter du code après le DOM est chargé complètement. Cela peut être utilisé pour joindre des gestionnaires d'événements pour des éléments sur la page.e.g

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

    }); 
}) 

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

En interne, jQuery se raccorde à l' DOMContentLoaded et window.onload comme une solution de repli. Dans IE cas d'une tentative est faite pour faire défiler la fenêtre jusqu'à ce succès.

J'ai quelques questions, mon premier étant, lors de la liaison des gestionnaires d'événements pour l' document lui-même, est-il nécessaire de placer ce code dans un document.ready ? J'ai toujours été écrit le code ci-dessous sans l'enveloppant dans un document.ready

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

Et comme vous pouvez le voir, il fonctionne. À mon avis, étant donné que ce code n'a pas à s'accrocher à des éléments dans le document, mais le document lui-même, il n'y a pas besoin de l'envelopper dans un document.ready gestionnaire. Une autre raison pour laquelle je n'emballe pas, c'est parce que j'ai utilisé pour faire la même chose en javascript natif l'équivalent serait le code ci-dessous, qui a aussi des œuvres.

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

J'ai vu de nombreux posts où les gens de l'envelopper dans un document.ready, est-il un inconvénient de ne pas habillage de ce code en document.ready ?

Aussi je pense que cette question vient de mon manque de clarté de ce qui se passe pendant ce temps, lorsque le DOM est en cours de construction, donc si quelqu'un peut expliquer ce qui se passe au cours de la période juste avant le DOM est prêt. Pour moi, le document est prêt quand le html a été analysée et transformée en une arborescence DOM, ou est-il de plus ?

En résumé, voici mes questions

1. Lors de la liaison des gestionnaires d'événements pour l' document lui-même, est-il faut mettre ce code dans un document.ready.
2. Existe-il des inconvénients à ne pas enrouler le code dans l' document.ready ?
3. Ce que la séquence d'événements ont lieu lorsque le document est en cours de construction, juste avant l' document.ready est tiré ?

Answer 1

Si vous êtes à la liaison au document lui-même, vous n'avez pas besoin d'attendre jusqu'à ce qu'il est prêt. Il ne devrait pas y avoir certains inconvénients à ne pas l'enveloppant dans le document.prêt dans ce cas.

document.prêt obtient déclenché lorsque le DOMReady événement est déclenché par le navigateur, ou lorsqu'un test est réussi pour les versions de navigateurs qui ne supportent pas le DOMReady événement.

Des informations supplémentaires. (5/22/12)

La plupart des navigateurs modernes de mettre en œuvre la DOMContentLoaded événement qui se déclenche lorsque tous les éléments définis sur le document sont prêts à être manipulés par du javascript. Les autres navigateurs s'appuyer soit sur un setTimeout boucle qui vérifie en permanence la readystate du document ou de la lie directement à la onreadystatechanged méthode du document (prises à partir de jquery de base). Le document lui-même est prêt à être manipulé avant d'javascript est jamais exécuté, de sorte que vous n'aurez jamais à attendre lors de la liaison directement sur le document.

La seule chose à corriger, c'est que si le code interagit avec des éléments autres que le document, il y a une chance que l'événement pourrait être déclenchée sur le document avant que ces éléments existent. Il est très peu probable que cela arrive, mais cela peut arriver. Si c'est quelque chose qui peut se produire avec votre code, alors il est logique de le placer à l'intérieur de l' $(document).ready() pour éviter ce scénario. Votre exemple n'est pas bon de souscription d'être placé à l'intérieur de l' $(document).ready().

Answer 2

Le point de $(document).ready est d'exécuter du code après que le document entier ait été analysé.

Vous ne devez l'utiliser que si vous souhaitez utiliser des éléments qui n'existent pas encore.
(par exemple, si votre script est dans le <head> )

Si les éléments que vous utilisez existent déjà (soit parce qu'ils sont globaux, soit parce que votre <script> est inférieur à eux), vous n'en avez pas besoin.

Answer 3

Le seul inconvénient de ne pas lier un événement au document dans un bloc document.ready serait: il sera possible de déclencher l'événement avant que tout le contenu de la page ait été chargé, ce qui peut ne pas être ce que vous voulez.

Answer 4

Cet événement est déclenché lorsque le DOM de la hiérarchie a été entièrement construit c'est à dire tous les éléments d'actif , tels que des images ont été complètement reçu.

Vous avez demandé:

• Lors de la liaison des gestionnaires d'événements pour le document lui-même, est-il nécessaire de placer ce code dans un document.est-il prêt?
  • Réponse: Non. Lors de l'utilisation de code qui s'appuient sur la valeur des propriétés de style CSS, il est important de référence des feuilles de style externes ou d'intégrer des éléments de style avant de référencer le script dans lequel votre code réside ou juste avant document.ready() bloc.

---

• Existe-il des inconvénients à ne pas enrouler le code dans le document.est-il prêt ?
  • Réponse: Non. Mais quand vous avez à créer des éléments à l'intérieur de vos documents à l'aide de JavaScript, il faut attendre pour l'amour jusqu'à ce que votre DOM est prêt. Pour cela, vous devez mettre votre code à l'intérieur d' document.ready() bloc.

---

• Ce que la séquence d'événements ont lieu lorsque le document est en cours de construction, à droite avant le document.prêt est tiré ?
  • Réponse: Avant de document.prêt obtient déclenché, DOMContentLoaded est déjà déclenchée par navigateur.

Answer 5

Lorsque vous utilisez des actions sur des éléments ou que vous les appelez (qui seront générés dans le DOM ou n'existent pas encore), vous devez utiliser $(document).ready