2012-05-17 7 views
32

document.ready का उपयोग डोम पूरी तरह से लोड होने के बाद कोड निष्पादित करने के लिए किया जाता है। इस पृष्ठ पर तत्वों को ईवेंट हैंडलर्स संलग्न करने के लिए उदाहरण के लिए:क्या इस कोड को दस्तावेज़ में होना चाहिए। पहले से ही?

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

    }); 
}) 

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

आंतरिक रूप से, jQuery अप DOMContentLoaded और window.onload फ़ॉलबैक के रूप में करने के लिए हुक इस्तेमाल किया जा सकता। आईई के मामले में an attempt is made to scroll the viewport over and over until successful

मेरे पास कुछ प्रश्न हैं, मेरा पहला व्यक्ति होने पर, ईवेंट हैंडलर को document पर बाध्य करते समय, क्या यह कोड document.ready में रखना आवश्यक है? मैं हमेशा एक document.ready

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

में यह लपेटकर बिना नीचे कोड लिख दिया है और आप देख सकते हैं, यह works। मेरी समझ यह है कि चूंकि यह कोड दस्तावेज़ के भीतर किसी भी तत्व को हुक नहीं करता है, लेकिन दस्तावेज़ स्वयं ही document.ready हैंडलर में लपेटने की आवश्यकता नहीं है। एक और कारण यह है कि मैं इसे लपेटता नहीं हूं क्योंकि मैं वनीला जावास्क्रिप्ट में ऐसा करता था, समकक्ष नीचे कोड होगा, जो works भी होगा।

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

मैंने देखा है कई पदों जहां लोगों को एक document.ready में लपेट, वहाँ document.ready में इस कोड को लपेटकर नहीं के किसी भी नकारात्मक पक्ष यह है?

यह भी मुझे लगता है कि इस सवाल के दौरान क्या होता है, इस बारे में स्पष्टता की कमी से यह प्रश्न उत्पन्न होता है, इसलिए यदि कोई व्यक्ति डीओएम तैयार होने से पहले अवधि के दौरान क्या होता है, तो कोई समझ सकता है। मेरे लिए दस्तावेज़ तैयार है जब HTML को पार्स किया गया है और एक डोम पेड़ में परिवर्तित किया गया है, या इसके लिए और भी कुछ है?

संक्षेप में, यहाँ मेरे सवालों

  1. जब document को ईवेंट हैंडलर्स बंधन में ही हैं, यह आवश्यक एक document.ready में उस कोड डालने के लिए है।
  2. document.ready में कोड को लपेटने के लिए कोई डाउनसाइड्स नहीं हैं?
  3. दस्तावेज़ का निर्माण होने पर घटनाओं का क्या अनुक्रम होता है, document.ready से पहले निकाल दिया जाता है?
+0

ओओपी। प्रतिनिधिमंडल नहीं एनएम –

उत्तर

33

यदि आप दस्तावेज़ के लिए बाध्यकारी हैं, तो आपको तैयार होने तक प्रतीक्षा करने की आवश्यकता नहीं है। दस्तावेज़ में इसे लपेटने के लिए कोई डाउनसाइड्स नहीं होना चाहिए। इस मामले में पहले से ही।

document.ready ब्राउज़र से ट्रिगर होने पर दस्तावेज़ से पहले ही निकाल दिया जाता है, या जब विशिष्ट परीक्षण ब्राउज़र के उन संस्करणों के लिए सफल होता है जो DOMReady ईवेंट का समर्थन नहीं करते हैं।

अतिरिक्त जानकारी।(5/22/12)

अधिकांश आधुनिक ब्राउज़र DOMContentLoaded घटना है जो आग जब सभी तत्वों को दस्तावेज़ पर परिभाषित जावास्क्रिप्ट द्वारा हेरफेर किया जा करने के लिए तैयार कर रहे हैं को लागू। अन्य ब्राउज़र या तो एक सेटटाइमआउट लूप पर भरोसा करते हैं जो दस्तावेज़ के तैयार चरण को लगातार जांचता है या सीधे दस्तावेज़ की ऑनरस्टेस्टेन्टेड विधि (jquery core से लिया गया) पर बाध्य करता है। दस्तावेज़ स्वयं जावास्क्रिप्ट को कभी भी निष्पादित करने से पहले छेड़छाड़ करने के लिए तैयार है, इसलिए दस्तावेज़ को सीधे बाध्य करते समय आपको प्रतीक्षा करने की आवश्यकता नहीं है।

यहां एकमात्र गोचाचा यह है कि यदि कोड दस्तावेज़ के अलावा अन्य तत्वों के साथ इंटरैक्ट करता है, तो यह संभावना है कि दस्तावेज़ उन तत्वों से पहले दस्तावेज़ पर ट्रिगर किया जा सकता है। ऐसा होने के लिए यह बहुत ही असंभव है, लेकिन ऐसा हो सकता है। यदि ऐसा कुछ है जो आपके कोड के साथ हो सकता है, तो उस परिदृश्य को रोकने के लिए इसे $(document).ready() के अंदर रखना समझ में आता है। आपका नमूना $(document).ready() के अंदर रखा जा रहा वारंट नहीं है।

5

नहीं दस्तावेज़ में एक घटना बाध्यकारी एक document.ready ब्लॉक में हो सकता है कि यह घटना आग करना संभव हो जाएगा से पहले सभी पृष्ठ सामग्री, लोड किया गया है जो नहीं हो सकता है कि आप क्या चाहते का ही दोष यह है।

11

$(document).ready का बिंदु पूरे दस्तावेज़ को पारदर्शी के बाद कोड निष्पादित करना है।

यदि आप उन तत्वों का उपयोग करना चाहते हैं जो अभी तक मौजूद नहीं हैं, तो आपको केवल इसका उपयोग करने की आवश्यकता है।
(जैसे, अपनी स्क्रिप्ट <head> में है)

हैं तत्वों आप पहले से ही उपयोग कर रहे हैं मौजूद हैं (क्योंकि या तो वे वैश्विक रहे हैं या क्योंकि आपके <script> उन्हें कम है), तो आप इसकी आवश्यकता नहीं है।

2

जब या तत्वों के कार्यों का उपयोग कर उन्हें बुला (कि डोम में उत्पन्न हो जाएगा या अभी तक अस्तित्व में नहीं है) आप उत्तर देने के लिए $(document).ready

1

इसके अलावा उपयोग करने की आवश्यकता: आप मात्र उपयोग jQuery लाइव समारोह कर सकते हैं (कीडाउन के बजाए इत्यादि) स्थिति से मुक्त होने के लिए 'डीओएम तत्व समाप्त हो जाना चाहिए'।

तो अगली ठीक से काम करना होगा:

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

इस मामले jQuery घटना बांधता है जब यह संभव है में। आपको सभी बाइंडिंग्स को एक (तैयार) फ़ंक्शन में रखने का दर्द नहीं है, आपके बाइंडिंग को आपके HTML पृष्ठ या जावास्क्रिप्ट फ़ाइलों के स्वतंत्र हिस्सों में रखा जा सकता है।

तो, परिणाम उत्तर है: नहीं, आपको दस्तावेज़ में अपना कोड रखने की आवश्यकता नहीं है। पहले से ही निर्दिष्ट फ़ंक्शन का उपयोग करें।

अद्यतन

के अंतिम संस्करण में jQuery (> = 1.7) on() बजाय समारोह live() उपयोग करें, क्योंकि पिछले एक depricated है। इसलिए, ईवेंट बाइंडिंग को तैयार() में रखना आवश्यक नहीं है।

+0

jQuery.live() jQuery के बाद के संस्करणों में बहिष्कृत है। JQuery.on(), jQuery.off() और jQuery.one() के साथ बदला गया। कम से कम, jQuery.delegate() का उपयोग करना बेहतर है। V1.7 प्रति http://api.jquery.com/live/ – Silkster

+0

'$ (दस्तावेज़)। लाइव (" कीडाउन ", एफएन)' '(दस्तावेज़, दस्तावेज़) .keydown (fn) जैसी ही बात है) ', या' $ (दस्तावेज़) .keydown (fn) ' –

+0

@ सिल्कस्टर जानकारी के लिए धन्यवाद! – sergzach

4

इस घटना शुरू हो रहा है जब डोम पदानुक्रम पूरी तरह से किया गया है साथ बनाया अर्थात सभी परिसंपत्तियों ऐसी छवियों रूप किया गया है पूरी तरह से प्राप्त हो जाता है।

आप से पूछा:

  • जब स्वयं दस्तावेज़ के लिए ईवेंट हैंडलर्स बंधन, यह आवश्यक एक document.ready में उस कोड डाल करने के लिए है?
    • उत्तर: नहीं। सीएसएस शैली गुणों के मूल्य पर भरोसा करने वाले कोड का उपयोग करते समय, स्क्रिप्ट को संदर्भित करने से पहले बाहरी स्टाइलशीट या एम्बेड स्टाइल तत्वों का संदर्भ देना महत्वपूर्ण है जिसमें आपका कोड रहता है या document.ready() ब्लॉक से ठीक पहले।

  • वहाँ किसी भी कमियां document.ready में कोड लपेटकर नहीं करने के लिए कर रहे हैं?
    • उत्तर: नहीं, लेकिन जब आपको जावास्क्रिप्ट का उपयोग करके अपने दस्तावेज़ों के अंदर तत्व बनाना है, तो तब तक प्रतीक्षा करें जब तक आपका डोम तैयार न हो जाए। इसके लिए, आपको अपना कोड document.ready() ब्लॉक के अंदर रखना चाहिए।

  • घटनाओं की क्या अनुक्रम जगह जब दस्तावेज़ निर्माण किया जा रहा है लेते हैं, ठीक पहले document.ready निकाल दिया जाता है?
    • उत्तर: दस्तावेज़ से पहले ही निकाल दिया गया है, DOMContentLoaded पहले ही ब्राउज़र द्वारा ट्रिगर किया गया है।
+1

असल में कोई गारंटी नहीं है कि 'document.ready' निकाल दिए जाने पर सभी छवियों को लोड किया गया है। यही कारण है कि '.load' घटना है। मैं आपके अन्य उत्तरों से सहमत हूं। –

+1

हां, 'लोड' ईवेंट किसी भी तत्व को भेजा जा सकता है जब यह और उसके उप-तत्व लोड हो जाते हैं, उदाहरण के लिए' window.load() '। लेकिन अगर आप छवियों को लोड करने की प्रतीक्षा नहीं करना चाहते हैं, तो आपको अपना कोड 'हैंडलर)' ​​विधि में भेजे गए हैंडलर के अंदर रखना चाहिए। – Vishal

1

1. जब स्वयं दस्तावेज़ के लिए ईवेंट हैंडलर्स बंधन, यह एक document.ready में उस कोड डाल करने के लिए आवश्यक है?

नहीं। वास्तव में, जेक्यू में बाध्यकारी के लिए 'ऑन' विधियां दस्तावेज़ में प्रतिनिधि हो सकती हैं ताकि आप किसी भी समय सुरक्षित रूप से उन तत्वों का उपयोग कर सकें जब तक कि बहुत सारे बुलबुले को रोका नहीं जा रहा था स्टॉपप्रॉपैगेशन के साथ कंटेनर तत्व।

2. क्या दस्तावेज़ में कोड को लपेटने के लिए कोई डाउनसाइड्स नहीं है। पहले से ही?

केवल उस स्क्रिप्ट में एचटीएमएल हिट करने का प्रयास हो सकता है जो अभी तक नहीं है। बातचीत यह है कि दस्तावेज़ तैयार हो सकता है और दस्तावेज़ से पहले उपयोगकर्ता से घटनाएं प्राप्त कर सकता है। अपने केक रखने और इसे खाने के लिए 'ऑन' विधियों या Google 'ईवेंट प्रतिनिधिमंडल' को देखें जहां घटनाएं चिंतित हैं (चेतावनी लाइब्रेरी है जो स्टॉपप्रॉपैगेशन बेवकूफ तरीके से उपयोग करती है)। document.ready अधिकतर यह सुनिश्चित करने का एक तरीका है कि आपका कोड फायर हो रहा है जब HTML हिट होने के लिए तैयार है। यह कोड के लिए आवश्यक नहीं है जो शरीर टैग के निचले हिस्से में गिरता है जब तक कि (शायद) आप किसी चीज़ के साथ शरीर को मार रहे हों।

3. दस्तावेज़ का निर्माण होने पर दस्तावेज़ों का निर्माण होने पर घटनाओं का क्या अनुक्रम होता है। पहले ही निकाल दिया जाता है?

उस बिंदु पर जहां दस्तावेज़ तैयार किया गया है, सभी टैगों को पार्स किया गया है और लेआउट आयाम स्थापित किए गए हैं।छवियों को पूरी तरह से लोड करने की आवश्यकता नहीं है, और मैं केवल अनुमान लगा रहा हूं, लेकिन मुझे संदेह है कि गैर-लेआउट प्रभावशाली सीएसएस कुछ ब्राउज़र में अभी भी प्रभावी नहीं हो सकता है। एक तत्व को 'तैयार' माना जाता है जब उसका बंद टैग HTML पार्सर द्वारा पढ़ा और निष्पादित किया गया है। एचटीएमएल पार्सिंग जारी रखने से पहले स्क्रिप्ट टैग में जेएस को एक दुभाषिया द्वारा संभाला जाना चाहिए, यही कारण है कि हम आजकल हमारे कोड को दस्तावेज़ के निचले भाग में रखते हैं, वैसे भी, तेजी से माना जाने वाला लोडिंग समय के लिए।

संबंधित मुद्दे