जावास्क्रिप्ट: ईवेंट हैंडलर पंजीकृत करने के लिए सबसे अच्छी जगह

यह प्रश्न इतना बुनियादी है, मुझे लगता है कि कुछ का डुप्लिकेट होना चाहिए, भले ही मेरे पास looked for something similar है।जावास्क्रिप्ट: ईवेंट हैंडलर पंजीकृत करने के लिए सबसे अच्छी जगह

मेरा प्रश्न मूल रूप से है: प्रारंभ में एचटीएमएल तत्वों के लिए ईवेंट हैंडलर पंजीकृत करने के लिए सबसे अच्छी जगह कहां है?

एक ईवेंट हैंडलर रजिस्टर करने के लिए सबसे आसान तरीका है जाहिर है बस इसे इनलाइन करने के लिए:

<div id = "mybutton" onclick = "doSomething()">Click me</div>

लेकिन इस आधुनिक वेब विकास में तर्क और सामग्री की जुदाई की ओर भारी जुलूस के खिलाफ जाता है। तो, 2012 में, सभी तर्क/व्यवहार शुद्ध जावास्क्रिप्ट कोड में किया जाना चाहिए। यह बहुत अच्छा है, और यह अधिक रखरखाव कोड की ओर जाता है। लेकिन आपको अभी भी कुछ प्रारंभिक हुक की आवश्यकता है जो आपके HTML तत्वों को आपके जावास्क्रिप्ट कोड से जोड़ता है।

आमतौर पर, मैं बस की तरह कुछ कार्य करें: - क्योंकि हम अभी भी यहाँ इनलाइन जावास्क्रिप्ट का उपयोग कर रहे

<body onload = "registerAllEventHandlers()">

लेकिन ... कि अभी भी "धोखा दे" है, यह नहीं है। लेकिन हमारे पास अन्य विकल्प क्या हैं? हम <head> अनुभाग में एक <script> टैग में यह नहीं कर सकते, क्योंकि उस बिंदु पर हम डोम उपयोग नहीं कर सकते क्योंकि पेज अभी तक लोड नहीं किया है:

<head> 
<script type = "text/javascript"> 
    var myButton = document.getElementById("mybutton"); // myButton is null! 
</script> 
</head>

हम पर एक <script> टैग लगाते हैं करें पृष्ठ या कुछ के नीचे? पसंद:

<html> 
<body> 
... 
... 
<script type = "text/javascript"> 
    registerAllEventHandlers(); 
</script> 
</body> 
</html>

यहां सबसे अच्छा अभ्यास क्या है?

स्रोत

2012-05-27 Channel72

आप window.onload उपयोग कर सकते हैं:

<script type = "text/javascript"> 
    window.onload = registerAllEventHandlers; 
</script>

या यदि आप jquery का उपयोग करें:

$(registerAllEventHandlers);

onload काम करता है का उपयोग करना है, क्योंकि यह onload घटना तुरंत पंजीकृत करता है, लेकिन यह आग DOM के तैयार है।

स्रोत

2012-05-27 14:23:03

-1: 'window.onload' घटना jQuery की 'तैयार' घटना का उपयोग करने के बराबर नहीं है: पृष्ठ बंद होने पर 'window.onload' आग लग जाएगी, जिसमें सभी बाहरी संसाधन (छवियां, सीएसएस इत्यादि) शामिल हैं, जबकि HTML के लोड होने के बाद jQuery के 'तैयार' ईवेंट आग लग जाएगा लेकिन बाहरी संसाधनों से पहले। 'Window.onload' का उपयोग करना एक बुरा विचार है, क्योंकि कई मामलों में (कई छवियां, धीमी कनेक्शन इत्यादि) जावास्क्रिप्ट ईवेंट लंबे समय तक पंजीकृत नहीं होंगे। – georgebrock

@ स्लेबेटमैन: क्या आप विस्तार कर सकते हैं कि छवियों (आदि) लोड होने से पहले और दो अलग-अलग तकनीकों के बीच मतभेदों को समझने से पहले जेएस इवेंट हैंडलर संलग्न करना मूर्ख क्यों है? ऐसी साइट पर जो जानकारी सीखने और साझा करने के बारे में है, एक टिप्पणी कह रही है कि "वह बेवकूफ" बहुत रचनात्मक नहीं है। – georgebrock

मेरे पास a similar answer था लेकिन सामान्य रूप से जावास्क्रिप्ट के बारे में था। लेकिन विचार अभी भी वही है - शरीर को बंद करने से पहले भार स्क्रिप्ट।

लाइब्रेरी का लाभ उठाएं जो window.onload और डोम तैयार ईवेंट को सारणी देते हैं। इस तरह, जैसे ही डोम तैयार हो जाता है, आप स्क्रिप्ट लोड कर सकते हैं।

स्रोत

2012-05-27 14:23:19 Joseph

आपको डीओएम तैयार होने के तुरंत बाद अपने ईवेंट हैंडलर पंजीकृत करना चाहिए। सभी ब्राउज़रों में यह पता लगाना हमेशा आसान नहीं रहा है, हालांकि आईई 8 (और पहले) के उल्लेखनीय अपवाद के साथ अब व्यापक रूप से उपयोग किए जाने वाले ब्राउज़र DOMContentLoaded ईवेंट का समर्थन करते हैं (टिप्पणियों में इंगित करने के लिए gengkev पर धन्यवाद)।

यह आपके के अंत में आपके registerAllEventHandlers फ़ंक्शन को कॉल करने के लिए अनिवार्य रूप से समकक्ष है, लेकिन इसका लाभ यह है कि आपको अपने HTML पर कोई जावास्क्रिप्ट जोड़ने की आवश्यकता नहीं है।

window.onload का उपयोग करने से यह काफी बेहतर है क्योंकि यह तब तक निष्पादित नहीं होता जब तक कि सभी पृष्ठ की संपत्तियां (छवियां, सीएसएस इत्यादि) लोड नहीं हो जातीं।

यदि आप प्रमुख जावास्क्रिप्ट ढांचे में से एक का उपयोग कर रहे हैं, तो आप आईओ के पुराने संस्करणों में भी, जब डीओएम तैयार हो, तो आप आसानी से पता लगा सकते हैं।

jQuery(document).ready(function() { 
    // Your initialisation code here 
});

या आशुलिपि:

jQuery(function() { … });

साथ प्रोटोटाइप आप dom:loaded event का प्रयोग करेंगे: साथ jQuery आप ready event का प्रयोग करेंगे

document.observe("dom:loaded", function() { 
    // Your initialisation code here 
});

स्रोत

2012-05-27 14:27:23 georgebrock

लगभग सभी ब्राउज़रों में DOMContentLoaded लेकिन आईई <9 – gengkev

मुझे नहीं पता था कि अब इतना व्यापक रूप से समर्थित था, मुझे लगता है कि मुझे मदद करने के लिए jQuery रखने के लिए इतना उपयोग किया जाता है। धन्यवाद @gengkev – georgebrock

व्यक्तिगत रूप से, मुझे पता नहीं है तत्व के लिए onlclick="doSomething();" जोड़ने के साथ समस्याएं रों। कोई तर्क नहीं, बस एक फंक्शन कॉल।

सभी तर्क यह होना चाहिए: HEAD या एक अलग फ़ाइल में परिभाषित फ़ंक्शन में।

मुझे बताएं कि जब आप href="somepage.html" या href="somepage.html#someanchor" को एक टैग में जोड़ते हैं तो अंतर क्या होता है।

स्रोत

2012-05-27 15:24:41 Matthew

मुझे शायद ही कभी पता चलता है कि मेरे पास सिर्फ एक लिंक है जिसके लिए कुछ व्यवहार की आवश्यकता है; अक्सर यह समान लिंक का एक पूरा समूह है। जब वह व्यवहार बदलता है या अब इसकी आवश्यकता नहीं होती है, तो मुझे एक '.js' फ़ाइल को बदलने या निकालने के लिए और अधिक सुविधाजनक लगता है जो व्यवहार को परिभाषित करता है और इसे' ऑनक्लिक 'विशेषताओं को बदलने या हटाने के बजाय प्रासंगिक लिंक से जोड़ता है। कई लिंक – georgebrock

@georgebrock आप वही कह सकते हैं यदि आप अपनी HTML फ़ाइलों का नाम बदलना/पुन: संरचना करना चाहते हैं - आपको अभी भी प्रत्येक 'ए' टैग पर जाना होगा और' href' विशेषता 'बदलनी होगी। वैसे भी, आपके मामले में, फ़ंक्शन नाम बदलने की कोई आवश्यकता नहीं है, बस फ़ंक्शन को फिर से लिखें। यदि ऑनक्लिक का व्यवहार बदल रहा है तो हो सकता है कि फ़ंक्शन नाम को किसी और चीज़ में बदलना उचित हो। हालांकि आप एक अच्छा मुद्दा बनाते हैं। – Matthew

एक बार जब कोई वेबसाइट सार्वजनिक वेब पर हो, तो 'href' विशेषताओं को बदलना एक सिरदर्द होने जा रहा है, क्योंकि [शांत यूआरआई नहीं बदलते हैं] (http://www.w3.org/Provider/Style/URI) (और जब उन्हें बदलना पड़ता है, तो उन्हें नए स्थानों पर 301 होना चाहिए)। लेकिन मैं पीछे हटा। चूंकि आप अपनी जावास्क्रिप्ट लिख सकते हैं ताकि परिवर्तन का एक बिंदु और चिंताओं को स्पष्ट रूप से अलग किया जा सके, ऐसा क्यों नहीं? – georgebrock

जावास्क्रिप्ट: ईवेंट हैंडलर पंजीकृत करने के लिए सबसे अच्छी जगह

उत्तर

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