একটি <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>

আমি কেবল জাভাস্ক্রিপ্ট কোডের পরিবর্তে একটি বৈধ ইউআরএল রাখার চেষ্টা করার ধারণাটি বুঝতে পারি, যদি ব্যবহারকারী জাভাস্ক্রিপ্ট সক্ষম না করে থাকে। তবে এই আলোচনার উদ্দেশ্যে, আমি ধরে নিতে পারি জাভাস্ক্রিপ্ট সক্ষম হয়েছে (তারা এটি ছাড়া লগইন করতে পারে না)।

আমি ব্যক্তিগতভাবে বিকল্প 2 পছন্দ করি কারণ এটি আপনাকে কী চলতে চলেছে তা দেখার অনুমতি দেয় - বিশেষত যেখানে ডিফল্ট করার সময় দরকারী যেখানে ফাংশনটিতে প্যারামিটারগুলি পাস করা হচ্ছে। আমি এটি বেশ খানিকটা ব্যবহার করেছি এবং ব্রাউজারের সমস্যাগুলি খুঁজে পাইনি।

আমি পড়েছি যে লোকেরা 4 টি সুপারিশ করে, কারণ এটি ব্যবহারকারীর অনুসরণ করার জন্য একটি বাস্তব লিঙ্ক দেয় তবে সত্যই, # "বাস্তব" নয়। এটি একেবারে কোথায় যাবে।

এমন কোনও কি আছে যা সমর্থন করে না বা সত্যিই খারাপ, যখন আপনি জানেন যে ব্যবহারকারী জাভাস্ক্রিপ্ট সক্ষম করেছেন?

সম্পর্কিত প্রশ্ন: জাভাস্ক্রিপ্ট লিঙ্কগুলির জন্য Href: "#" বা "জাভাস্ক্রিপ্ট: বাতিল (0)"? ।

Question 2

আমি ম্যাট ক্রুসের জাভাস্ক্রিপ্ট সেরা অভ্যাস নিবন্ধটি বেশ উপভোগ করছি । এতে তিনি বলেছেন যে hrefজাভাস্ক্রিপ্ট কোডটি কার্যকর করতে বিভাগটি ব্যবহার করা একটি খারাপ ধারণা। যদিও আপনি বলেছেন যে আপনার ব্যবহারকারীদের অবশ্যই জাভাস্ক্রিপ্ট সক্ষম থাকতে হবে, এমন কোনও কারণ নেই যে আপনার কোনও জাভাস্ক্রিপ্ট লিঙ্কগুলি hrefলগ-ইন করার পরে জাভাস্ক্রিপ্ট বন্ধ হওয়ার ঘটনা ঘটলে আপনার বিভাগের জন্য ইঙ্গিত করতে পারে এমন কোনও সাধারণ HTML পৃষ্ঠা নেই page আমি আপনাকে এই ফলব্যাক প্রক্রিয়াটি এখনও মঞ্জুর করতে উত্সাহিত করব। এর মতো কিছু "সেরা অনুশীলনগুলি" মেনে চলে এবং আপনার লক্ষ্য অর্জন করবে:

<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 এর এফএফ 3 এবং আই 7 তে একটি বাক্য গঠন ত্রুটি রয়েছে। আমি # 1 এবং # 3 পদ্ধতি পছন্দ করি, কারণ # 4 '#' দিয়ে ইউআরআইকে নোংরা করে যদিও কম টাইপিংয়ের কারণ হয় ... স্পষ্টতই, অন্যান্য প্রতিক্রিয়া দ্বারা উল্লিখিত হিসাবে, সেরা সমাধান ইভেন্ট হ্যান্ডলিং থেকে পৃথক এইচটিএমএল।

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>

ডকুমেন্টটি প্রস্তুত হওয়ার আগে আপনি এটি চালাতে পারেন, বোতামগুলিতে ক্লিক করা কাজ করবে কারণ আমরা ইভেন্টটি নথিতে সংযুক্ত করি।

সূত্র: