Document.addEventListener और window.addEventListener के बीच अंतर?

Question

PhoneGap का उपयोग करते समय, इसमें कुछ डिफ़ॉल्ट जावास्क्रिप्ट कोड होता है जो उपयोग करता है document.addEventListener, लेकिन मेरा अपना कोड है जो उपयोग करता है window.addEventListener:

function onBodyLoad(){
    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener("touchmove", preventBehavior, false);
    window.addEventListener('shake', shakeEventDidOccur, false);
}

क्या अंतर है और कौन सा उपयोग करना बेहतर है?

Answer 1

documentऔर windowविभिन्न वस्तुओं हैं और वे कुछ अलग घटनाओं की है। का उपयोग करते हुएaddEventListener()उन पर एक अलग वस्तु के लिए नियत घटनाओं को सुनता है। आपको उस घटना का उपयोग करना चाहिए जो वास्तव में आपके लिए रुचि रखने वाली घटना है।

उदाहरण के लिए, ऑब्जेक्ट "resize"पर कोई ईवेंट है जो windowऑब्जेक्ट पर नहीं है document।

उदाहरण के लिए, "DOMContentLoaded"घटना केवल documentवस्तु पर है।

तो मूल रूप से, आपको यह जानने की जरूरत है कि उस वस्तु को कौन सी वस्तु प्राप्त है जिसे आप .addEventListener()उस विशेष वस्तु में रुचि रखते हैं और उपयोग करते हैं।

यहां एक दिलचस्प चार्ट है जो दिखाता है कि किस प्रकार की वस्तुएं किस प्रकार की घटनाएं बनाती हैं: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference

---

यदि आप एक प्रचारित घटना (जैसे कि क्लिक ईवेंट) सुन रहे हैं, तो आप दस्तावेज़ ऑब्जेक्ट या विंडो ऑब्जेक्ट पर उस ईवेंट के लिए सुन सकते हैं। प्रचारित घटनाओं के लिए एकमात्र मुख्य अंतर समय में है। documentऑब्जेक्ट ऑब्जेक्ट से पहले इवेंट हिट करेगा windowक्योंकि यह पदानुक्रम में पहले होता है, लेकिन यह अंतर आमतौर पर सारहीन होता है ताकि आप या तो चुन सकें। मुझे आमतौर पर घटना के स्रोत के निकटतम वस्तु को चुनना बेहतर लगता है जो प्रचारित घटनाओं को संभालने के दौरान आपकी आवश्यकताओं को पूरा करता है। यही कारण है कि सुझाव है कि आप चुनेंगे documentसे अधिक windowहै जब या तो काम करेंगे। लेकिन, मैं अक्सर स्रोत के करीब भी जाऊँगा और document.bodyदस्तावेज़ में (यदि संभव हो तो) कुछ सामान्य अभिभावकों का उपयोग भी करूँगा ।

Comments

मैं "डॉक्यूमेंट अप करने के लिए नहीं बल्कि विंडो" के बारे में उत्सुक था। तो मैंने इसे यहाँ परीक्षण किया -> jsfiddle.net/k3qv9/1 क्या मुझे कुछ याद आ रहा है या क्या वास्तव में बुदबुदाती है?

— बंज़ोइमाका

@JOPLOmacedo - आपकी टिप्पणी से पहले, मैंने बुदबुदाहट के बारे में भाग को हटा दिया क्योंकि मैंने यह सुनिश्चित किया कि कौन सी घटनाएँ खिड़की पर बबल बनाती हैं और कौन सी नहीं। प्रोटोकॉल जो मैंने हमेशा देखा है कि document.bodyऑब्जेक्ट या ऑब्जेक्ट पर डॉक्यूमेंट वाइड बब्बलिंग इवेंट को इंटरसेप्ट करना documentहै ताकि windowबबल्ड इवेंट के लिए उपयोग करने का कोई कारण न हो । किसी भी मामले में मेरे जवाब का मतलब यह है कि कुछ घटनाएं केवल चालू हैं windowऔर कुछ घटनाएँ केवल documentऔर कुछ दोनों पर हैं इसलिए ओपी को उस वस्तु को चुनना चाहिए जो उस घटना से मेल खाती है जिसे वे संभालना चाहते हैं।

— ०२०:

ओके ठीक है। यही मैं आमतौर पर भी करता हूं - ठीक यही कारण है कि मैंने इसका परीक्षण करने का फैसला किया। जवाब के लिए धन्यवाद!

— बंज़ोइमाका

चूंकि 'क्लिक' इवेंट डॉक्यूमेंट और विंडो दोनों में उपलब्ध है और यदि हम डॉक्यूमेंट और विंडो दोनों पर ईवेंट रजिस्टर करते हैं, तो डॉक्यूमेंट फायर के पहले हैंडलर पर क्लिक करें। इसलिए इस दृष्टि से दस्तावेज़ का चुनाव बेहतर है। jsfiddle.net/3LcVw

— कोडर

एक और उदाहरण: आप जोड़ देंगे addEventListener("keydown", event)के माध्यम से window, सैमसंग टीवी के लिए की तुलना में यह काम नहीं करेगा। लेकिन आप उसी के साथ काम करेंगे document, तो यह होगा। यह विशिष्ट डिवाइस पर भी निर्भर करता है कि इसे बबल्ड ईवेंट कैसे कहते हैं।

— जैकब कुबिस्ता

Answer 2

आप पाएंगे कि जावास्क्रिप्ट में, आमतौर पर एक ही काम करने या एक ही जानकारी खोजने के कई अलग-अलग तरीके होते हैं। अपने उदाहरण में, आप कुछ ऐसे तत्व की तलाश कर रहे हैं जो हमेशा मौजूद रहने की गारंटी हो। windowतथाdocument दोनों बिल फिट हैं (बस कुछ मतभेदों के साथ)।

से मोज़िला देव नेटवर्क :

addEventListener () एक एकल लक्ष्य पर एक एकल ईवेंट श्रोता को पंजीकृत करता है। घटना का लक्ष्य एक दस्तावेज़ में एक ही तत्व हो सकता है, दस्तावेज़ स्वयं, एक खिड़की, या एक XMLHttpRequest।

इसलिए जब तक आप अपने "लक्ष्य" पर भरोसा कर सकते हैं, तब तक केवल यही होता है कि केवल वही अंतर है जो आप सुन रहे हैं, इसलिए बस अपने पसंदीदा का उपयोग करें।

Comments

यह सामान्य रूप से सच नहीं है। विभिन्न वस्तुओं पर अलग-अलग घटनाएं होती हैं। documentऔर windowसमान घटनाओं को प्राप्त नहीं करते हैं। आपको उस वस्तु का चयन करना चाहिए जो उस घटना को प्राप्त करती है जिसमें आप रुचि रखते हैं। कुछ घटनाएं दोनों documentऔर जा सकती हैं window, लेकिन सभी नहीं।

— ०२०:

Answer 3

windowबंधन के लिए एक में निर्मित वस्तु ब्राउज़र द्वारा प्रदान किया जाता है। यह उस ब्राउज़र विंडो का प्रतिनिधित्व करता है जिसमें शामिल है document। addEventListenerजब भी इसके पहले तर्क द्वारा बताई गई घटना होती है, तब इसकी विधि को कॉल करके दूसरे तर्क (कॉलबैक फ़ंक्शन) को पंजीकृत किया जाता है।

<p>Some paragraph.</p>
<script>
  window.addEventListener("click", () => {
    console.log("Test");
  });
</script>

AddEventListners का चयन विंडो या दस्तावेज़ से पहले निम्नलिखित बिंदुओं पर ध्यान दिया जाना चाहिए

1. घटनाओं में से अधिकांश के लिए ही कर रहे हैं windowया documentलेकिन कुछ घटनाओं की तरह है resize, और से संबंधित अन्य घटनाओं loading, unloadingऔर opening/closingसभी खिड़की पर सेट किया जाना चाहिए।
2. चूंकि विंडो में दस्तावेज़ है, इसलिए दस्तावेज़ को संभालने के लिए दस्तावेज़ का उपयोग करना अच्छा है (यदि यह संभाल सकता है) क्योंकि घटना पहले दस्तावेज़ को हिट करेगी।
3. इंटरनेट एक्सप्लोरर खिड़की पर पंजीकृत कई घटनाओं का जवाब नहीं देता है, इसलिए आपको घटना के पंजीकरण के लिए दस्तावेज़ का उपयोग करना होगा।