टैग में जावास्क्रिप्ट फ़ंक्शन को कॉल करने का बेहतर तरीका

Question

टैग से जेएस फ़ंक्शन को कॉल करने का निम्न तरीका निम्न तरीकों से कौन सा तरीका है?

<a href="javascript:someFunction()">LINK</a> 

या

<a href="#" onclick="someFunction();" return false;">LINK</a> 

मैं this question here देखा है, लेकिन यह कहना है <span onclick="someFunction()"> एक बेहतर विकल्प है। लेकिन कुछ कारणों से मुझे <a> लिंक का उपयोग करना होगा।

संपादित करें: मैं एक क्रॉस ब्राउज़र & क्रॉस प्लेटफॉर्म समाधान जो एंड्रोइड्स पर & iPads भी काम करना चाहिए के लिए देख रहा हूँ।

Answer 1

न तो अच्छा है।

व्यवहार वास्तविक मार्कअप से स्वतंत्र कॉन्फ़िगर किया जाना चाहिए। उदाहरण के लिए, jQuery में आप

$('#the-element').click(function() { /* perform action here */ }); 

एक अलग <script> ब्लॉक में कुछ ऐसा कर सकते हैं।

इसका लाभ (यह कुछ हद तक 1 के एक परिणाम है) कि यह

1. एक ही तरीका है कि सीएसएस मार्कअप और शैली अलग करती है
2. विन्यास centralises में मार्कअप और व्यवहार अलग करती है।
3. तुच्छता से एक्स्टेंसिबल

इसके अलावा jQuery के शक्तिशाली चयनकर्ता सिंटैक्स का उपयोग एक से अधिक तर्क शामिल करने के लिए यह शान से खराब हो (लेकिन इतना onclick घटना का उपयोग कर होता है) के बाद से आप मामले में एक href साथ लिंक टैग प्रदान कर सकते हैं है, उपयोगकर्ता जावास्क्रिप्ट सक्षम नहीं है।

बेशक, ये तर्क अभी भी गिनती हैं यदि आप jQuery या अन्य जावास्क्रिप्ट लाइब्रेरी का उपयोग नहीं कर रहे हैं (लेकिन ऐसा क्यों करते हैं?)।

Answer 2

दूसरा विकल्प के लिए कुछ लाभ:

1. आप thisonclick अंदर उपयोग कर सकते हैं लंगर ही संदर्भ के लिए (विकल्प में एक ही कर रही है 1 आप window बजाय दे देंगे)।

2. आप पुराने ब्राउज़र (या जिनके पास जेएस अक्षम है) का समर्थन करने के लिए href गैर-जेएस संगत यूआरएल पर सेट कर सकते हैं; ब्राउज़र जो जावास्क्रिप्ट का समर्थन करता है, फ़ंक्शन के अंदर से onclick="return someFunction();" और return false का उपयोग करने के लिए पृष्ठ पर रहने के लिए या onclick="return someFunction(); return false;" डिफ़ॉल्ट कार्रवाई को रोकने के लिए) पर कार्य करेगा।

3. मैंने href="javascript:someFunction()" का उपयोग करते समय अजीब चीजें देखी हैं और फ़ंक्शन एक मान देता है; पूरा पृष्ठ केवल उस मूल्य से बदल दिया जाएगा।

नुकसान

इनलाइन कोड: document गुंजाइश के रूप में <script> टैग जो window दायरे में चलाता है अंदर परिभाषित कोड का विरोध करने में

1. चलाता है; इसलिए, तत्वों को name या id विशेषता के आधार पर हल किया जा सकता है, जिससे किसी तत्व को फ़ंक्शन के रूप में इलाज करने का प्रयास करने का अनचाहे प्रभाव पड़ता है।

2. पुन: उपयोग करना कठिन है; नाजुक प्रतिलिपि को एक परियोजना से दूसरे में स्थानांतरित करने के लिए आवश्यक है।

3. अपने पृष्ठों पर वजन जोड़ता है, जबकि बाहरी कोड फ़ाइलों को ब्राउज़र द्वारा कैश किया जा सकता है।

Answer 3

मुझे यह कहने का लुत्फ है कि दोनों बुरे प्रथाएं हैं।

onclick या javascript: का उपयोग बाहरी स्क्रिप्ट से घटनाओं को सुनने के पक्ष में खारिज कर दिया जाना चाहिए, जिससे मार्कअप और तर्क के बीच बेहतर अलगाव की अनुमति मिलती है और इस प्रकार कम बार-बार कोड होता है।

ध्यान दें कि बाहरी स्क्रिप्ट ब्राउज़र द्वारा कैश की जाती हैं।

this answer पर एक नज़र डालें।

क्रॉस-ब्राउज़र ईवेंट श्रोताओं को लागू करने के कुछ अच्छे तरीके here।

Answer 4

आधुनिक ब्राउज़र Content Security Policy या सीएसपी का समर्थन करते हैं। यह वेब सुरक्षा का उच्चतम स्तर है और यदि आप इसे लागू कर सकते हैं तो दृढ़ता से अनुशंसा की जाती है क्योंकि यह सभी XSS attacks को पूरी तरह अवरुद्ध करता है।

आपके दोनों सुझाव सीएसपी सक्षम के साथ तोड़ते हैं क्योंकि वे आपके पृष्ठ में निष्पादित करने के लिए इनलाइन जावास्क्रिप्ट (जिसे हैकर द्वारा इंजेक्शन दिया जा सकता है) की अनुमति देता है।

सबसे अच्छा अभ्यास जावास्क्रिप्ट में घटना की सदस्यता लेना है, जैसा कि कोनराड रुडॉल्फ के जवाब में है।