Javascript Girl
  1. Javascript Girl
  3. Ce code doit-il être dans un document. Déjà?
Intereting Posts
Les JS angulaires attribuent la classe à l'étiquette du corps en fonction de la vue affichée? Comment puis-je empêcher iPhone (y compris iOS 7) d'aller dormir en HTML ou JS? Liste de paramètres de javascript array Comment inclure automatiquement les scripts dans un projet Yeoman / Grunt? Visual Studio 2015 se bloque lors de l'ouverture de fichiers Javascript Comment exécuter l'application Android Phonegap en arrière-plan (après avoir fermé l'application)? Outil Lasso en toile html5 Firefox et Chrome remplaçant LF par CR + LF pendant POST Comment puis-je séparer un nombre entier en chiffres séparés dans un tableau en JavaScript? Que se passe-t-il lorsque la promesse est cédée en javascript? Jquery ajax call success, comment puis-je changer une variable globale dans la fonction javascript wrapper? Alternative pour innerHTML? Javascript: programme d'addition simple ne fonctionne pas Quelle est une bonne expression régulière pour correspondre à une URL? Télécharger blobs localement à l'aide de Safari

Ce code doit-il être dans un document. Déjà?

Le document.ready est utilisé pour exécuter le code après que le DOM est entièrement chargé. Cela peut être utilisé pour attacher les gestionnaires d'événements aux éléments de la page, par exemple 

 $(function(){ $('#somediv').click(function(){ }); }) <div id="somediv"> </div>

En interne, jQuery s'accroche à DOMContentLoaded et window.onload tant que repli. Dans le cas d'IE, une tentative est faite pour faire défiler la fenêtre de façon répétée jusqu'à ce qu'elle soit réussie .

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

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

Et comme vous pouvez le voir, cela fonctionne . D'après ce que je comprends, puisque ce code ne se rattache à aucun élément du document, mais le document lui-même, il n'est pas nécessaire de l'envelopper dans un gestionnaire de document.ready . Une autre raison pour laquelle je ne l'enroule pas est parce que j'avais l'habitude de faire la même chose dans le javascript de vanilla que l'équivalent serait le code ci-dessous, qui fonctionne également. 

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

J'ai vu de nombreux articles où les gens l'enveloppent dans un document.ready . document.ready , il y a-t-il un inconvénient de ne pas enrayer ce code dans document.ready ?

De plus, je pense que cette question provient de mon manque de clarté de ce qui se passe pendant ce moment où le DOM est en cours de construction, donc si quelqu'un peut expliquer ce qui se passe pendant la période juste avant que le DOM soit prêt. Pour moi, le document est prêt lorsque le html a été analysé et converti en un arbre DOM, ou y at-il plus?

En résumé, voici mes questions

  1. Lorsqu'il lie les gestionnaires d'événements au document lui-même, est-il nécessaire de mettre ce code dans un document.ready .
  2. Existe-t-il des inconvénients pour ne pas enrouler le code dans le document.ready . document.ready ?
  3. Quelle séquence d'événements a lieu lorsque le document est en cours de construction, juste avant que le document.ready soit tiré?

Si vous liez le document lui-même, vous n'avez pas besoin d'attendre qu'il soit prêt. Il ne devrait y avoir aucun inconvénient pour ne pas l'enrouler dans document.ready dans ce cas.

Document.ready est déclenché lorsque l'événement DOMReady est déclenché par le navigateur ou lorsqu'un test spécifique est réussi pour les versions de navigateurs qui ne prennent pas en charge l'événement DOMReady.

Information additionnelle. (22/05/12)

La plupart des navigateurs modernes implémentent l'événement DOMContentLoaded qui se déclenche lorsque tous les éléments définis sur le document sont prêts à être manipulés par javascript. D'autres navigateurs s'appuient sur une boucle setTimeout qui vérifie en permanence la lecture du document ou se lie directement à la méthode onreadystatechanged du document (prise de jquery core ). Le document lui-même est prêt à être manipulé avant que javascript ne soit exécuté, donc vous n'avez jamais besoin d'attendre lors de la liaison directe avec le document.

Le seul fait que, si le code interagit avec des éléments autres que le document, il est possible que l'événement puisse être déclenché sur le document avant que ces éléments n'existent. Il est très peu probable que cela se produise, mais cela peut arriver. Si c'est quelque chose qui peut arriver avec votre code, il est logique de le placer à l'intérieur de $(document).ready() pour éviter ce scénario. Votre échantillon ne garantit pas être placé à l'intérieur de $(document).ready() .

Le point de $(document).ready est d'exécuter le code après l'analyse de l'intégralité du document.

Il suffit de l'utiliser si vous souhaitez utiliser des éléments qui n'existent pas encore.
(Par exemple, si votre script se trouve dans la <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 à ceux-ci), vous n'en avez pas besoin.

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

Cet événement se déclenche lorsque la hiérarchie des DOM a été entièrement construite, c'est-à-dire tous les atouts Comme les images Ont été complètement reçus.

Tu as demandé:

  • Lorsqu'il lie les gestionnaires d'événements au document lui-même, est-il nécessaire de mettre ce code dans un document.
    • Réponse : Non. Lorsque vous utilisez un code qui s'appuie sur la valeur des propriétés de style CSS, il est important de faire référence à des feuilles de style externes ou à incorporer des éléments de style avant de référencer le script dans lequel réside votre code ou juste avant document.ready() bloquer.
  • Existe-t-il des inconvénients pour ne pas enrouler le code dans le document. Déjà?
    • Réponse : Non. Mais lorsque vous devez créer des éléments à l'intérieur de vos documents en utilisant JavaScript, attendez le bien jusqu'à ce que votre DOM soit prêt. Pour cela, vous devez mettre votre code dans document.ready() block.
  • Quelle séquence d'événements a lieu lorsque le document est en cours de construction, juste avant que le document ne soit tiré?
    • Réponse : Avant que document.ready ne soit déclenché, DOMContentLoaded est déjà déclenché par un navigateur.

Lorsque vous utilisez des actions ou les appelez (cela sera généré dans DOM ou n'existe pas encore), vous devez utiliser $(document).ready

En plus des réponses: vous ne pouvez utiliser que la fonction jquery live (au lieu de la déviation, etc.) pour être libre de la situation. Les éléments DOM doivent être terminés.

Le prochain doit donc fonctionner correctement: 

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

Dans ce cas, jQuery lie l'événement lorsqu'il est possible. Vous n'avez pas de peine à placer toutes les liaisons dans une fonction ( prête ), vos liens peuvent être placés dans des parties indépendantes de votre page HTML ou des fichiers Javascript.

Donc, la réponse au résultat est: non, vous n'avez pas besoin de placer votre code dans document.ready lorsque vous utilisez la fonction mentionnée .

Mettre à jour

Dans les dernières versions de jQuery (> = 1.7), utilisez la fonction () au lieu de live () car la dernière est déprisée. Donc, il n'est pas nécessaire de placer les liaisons d'événements en prêt ().

1. Lorsqu'il lie les gestionnaires d'événements au document lui-même, est-il nécessaire de mettre ce code dans un document.

Non. En fait, les méthodes 'on' de liaison dans JQ peuvent être déléguées sur le document afin que vous puissiez les utiliser à tout moment sur n'importe quel élément en toute sécurité tant qu'il n'y avait pas beaucoup de bouffées arrêtées aux éléments du conteneur avec stopPropagation.

2. Y at-il des inconvénients pour ne pas enrouler le code dans le document. Déjà?

Seuls ces scripts dans la tête pourraient essayer de frapper HTML qui n'est pas encore là. L'inverse est que le HTML pourrait être prêt et obtenir des événements de l'utilisateur avant le document. Voir les méthodes 'on' ou google 'délégation d'événement' pour avoir votre gâteau et le manger aussi en cas d'événements (la mise en garde est des bibliothèques qui utilisent l'option stopPropagation stupidement). Document.ready est surtout une façon d'être certain que votre code déclenche lorsque le HTML est prêt à être touché. Il n'est pas nécessaire pour le code qui tombe au bas de l'étiquette du corps, à moins que (peut-être) vous frappez le corps lui-même avec quelque chose.

3. Quelle séquence d'événements a lieu lorsque le document est en cours de construction, juste avant que le document ne soit tiré?

Au moment où le document prêt est déclenché, toutes les étiquettes ont été analysées et les dimensions de mise en page ont été établies. Les images n'ont pas besoin d'être complètement chargées, et je suppose seulement, mais je soupçonne que les CSS qui ne sont pas impliqués dans la mise en page peuvent ne pas être encore en vigueur dans certains navigateurs. Un élément est considéré comme «prêt» lorsque sa balise de fermeture a été lue et exécutée par l'analyseur HTML. JS dans les étiquettes de script doit être géré par un interprète avant que l'analyse HTML ne puisse se poursuivre, c'est pourquoi nous avons tendance à mettre notre code au bas du doc ​​aujourd'hui de toute façon, pour un temps de chargement plus rapide.