एक <a> में जावास्क्रिप्ट कोड डालने के विभिन्न तरीकों में क्या अंतर है?

Question 1

मैंने एक <a>टैग में जावास्क्रिप्ट कोड डालने के निम्नलिखित तरीके देखे हैं :

function DoSomething() { ... return false; }

<a href="javascript:;" onClick="return DoSomething();">link</a>
<a href="javascript:DoSomething();">link</a>
<a href="javascript:void(0);" onClick="return DoSomething();">link</a>
<a href="#" onClick="return DoSomething();">link</a>

मैं केवल जावास्क्रिप्ट कोड के बजाय एक वैध URL डालने की कोशिश करने के विचार को समझता हूं, यदि उपयोगकर्ता के पास जावास्क्रिप्ट सक्षम नहीं है। लेकिन इस चर्चा के उद्देश्य के लिए, मुझे यह मानने की आवश्यकता है कि जावास्क्रिप्ट सक्षम है (वे इसके बिना लॉगिन नहीं कर सकते हैं)।

मैं व्यक्तिगत रूप से विकल्प 2 को पसंद करता हूं क्योंकि यह आपको यह देखने की अनुमति देता है कि डिबगिंग के दौरान विशेष रूप से उपयोगी क्या होने वाला है, जहां फ़ंक्शन को पास किया जा रहा है। मैंने इसका काफी उपयोग किया है और ब्राउज़र की समस्या नहीं पाई है।

मैंने पढ़ा है कि लोग 4 की सलाह देते हैं, क्योंकि यह उपयोगकर्ता को अनुसरण करने के लिए एक वास्तविक लिंक देता है, लेकिन वास्तव में, # "वास्तविक" नहीं है। यह बिल्कुल नहीं कहाँ जाएगा।

क्या कोई ऐसा है जो समर्थन नहीं करता है या वास्तव में बुरा है, जब आप जानते हैं कि उपयोगकर्ता ने जावास्क्रिप्ट सक्षम किया है?

संबंधित प्रश्न: जावास्क्रिप्ट लिंक के लिए Href: "#" या "जावास्क्रिप्ट: शून्य (0)"? ।

Question 2

मुझे मैट क्रूस का जावास्क्रिप्ट बेस्ट प्रैक्टिस आर्टिकल बहुत पसंद है । इसमें, वह कहता है कि hrefजावास्क्रिप्ट कोड को निष्पादित करने के लिए अनुभाग का उपयोग करना एक बुरा विचार है। यद्यपि आपने कहा है कि आपके उपयोगकर्ताओं के पास जावास्क्रिप्ट सक्षम होना चाहिए, तो कोई कारण नहीं है कि आपके पास एक साधारण HTML पृष्ठ नहीं हो सकता है कि आपके सभी जावास्क्रिप्ट लिंक hrefइस घटना में उनके अनुभाग के लिए इंगित कर सकते हैं कि कोई व्यक्ति लॉग इन करने के बाद जावास्क्रिप्ट को बंद करने के लिए होता है। मैं आपको इस गिरावट तंत्र की अनुमति देने के लिए अत्यधिक प्रोत्साहित करूंगा। ऐसा कुछ "सर्वोत्तम प्रथाओं" का पालन करेगा और अपने लक्ष्य को पूरा करेगा:

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>

Question 3

जब आप उपयोग कर सकते हैं तो आप ऐसा क्यों करेंगे addEventListener / attachEvent? अगर कोई hrefअसमान नहीं है , तो एक का उपयोग न करें <a>, एक का उपयोग करें <button>और तदनुसार शैली।

Question 4

आप दूसरी विधि भूल गए:

5: <a href="#" id="myLink">Link</a>

जावास्क्रिप्ट कोड के साथ:

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

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

Question 5

<a href="#" onClick="DoSomething(); return false;">link</a>

मैं यह करूँगा, या:

<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
    DoSomething();
    return false;
};

दशा पर निर्भर करता है। बड़े ऐप्स के लिए, दूसरा सबसे अच्छा है क्योंकि तब यह आपके ईवेंट कोड को समेकित करता है।

Question 6

विधि # 2 में FF3 और IE7 में एक सिंटैक्स त्रुटि है। मैं विधियों # 1 और # 3 को पसंद करता हूं, क्योंकि # 4 URI को '#' के साथ गंदा करता है, हालांकि कम टाइपिंग का कारण बनता है ... जाहिर है, जैसा कि अन्य प्रतिक्रियाओं से पता चला है, सबसे अच्छा समाधान ईवेंट हैंडलिंग से अलग HTML है।

Question 7

एक अंतर जो मैंने इस बीच देखा है:

<a class="actor" href="javascript:act1()">Click me</a>

और इस:

<a class="actor" onclick="act1();">Click me</a>

यदि ऐसा है तो किसी भी स्थिति में:

<script>$('.actor').click(act2);</script>

फिर पहले उदाहरण के लिए, act2पहले act1और दूसरे उदाहरण में चलेगा , यह दूसरा तरीका होगा।

Question 8

केवल आधुनिक ब्राउज़र

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

क्रॉस ब्राउज़र

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

दस्तावेज़ तैयार होने से पहले आप इसे चला सकते हैं, बटन पर क्लिक करने से काम चल जाएगा क्योंकि हम दस्तावेज़ में घटना को संलग्न करते हैं।

सूत्रों का कहना है: