133

मैंने कई बार सुना है कि जावास्क्रिप्ट घटनाओं का उपयोग करना, जैसे कि onClick()HTML में, एक बुरा अभ्यास है, क्योंकि यह शब्दार्थ के लिए अच्छा नहीं है। मैं जानना चाहूंगा कि डाउनसाइड क्या हैं और निम्नलिखित कोड कैसे ठीक करें?

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

javascript html

— Nill
स्रोत

10

en.wikipedia.org/wiki/Unwellrusive_JavaScript

— रॉकेट हज़मत

4

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

— मार्क बी

2

उस लिंक को जरूर पढ़ें। यह शब्दार्थ के साथ बहुत कम है, और अधिक करने के लिए ... उस पृष्ठ पर सभी सामान :-)

— '15:

अपने लिंक को एक नए टैब में खोलने का प्रयास करें, और आप इसका एक उदाहरण देखेंगे कि यह गलत क्यों है ...

— सेबेस्टियन सी।

2

यह एक होना चाहिए <button>, क्योंकि लिंक एक वास्तविक संसाधन को इंगित करने वाले हैं। यह उस तरह से अधिक अर्थपूर्ण है और स्क्रीन रीडर उपयोगकर्ताओं के लिए अधिक स्पष्ट है।

— प्रोग्रामर

171

आप शायद विनीत जावास्क्रिप्ट के बारे में बात कर रहे हैं , जो इस तरह दिखेगा:

<a href="#" id="someLink">link</a>

केंद्रीय जावास्क्रिप्ट फ़ाइल में तर्क के साथ कुछ इस तरह दिख रहा है:

$('#someLink').click(function(){
    popup('/map/', 300, 300, 'map'); 
    return false;
});

फायदे हैं

व्यवहार (जावास्क्रिप्ट) को प्रस्तुति से अलग किया गया है (HTML)
भाषाओं का मिश्रण नहीं
आप jQuery जैसे जावास्क्रिप्ट फ्रेमवर्क का उपयोग कर रहे हैं जो आपके लिए अधिकांश क्रॉस-ब्राउज़र समस्याओं को संभाल सकता है
आप कोड डुप्लिकेट के बिना एक बार में बहुत सारे HTML तत्वों में व्यवहार जोड़ सकते हैं

— माइकल बोर्गवर्ड
स्रोत

30

आपने काफी कुछ फायदे सूचीबद्ध किए हैं, लेकिन नुकसान के बारे में क्या? नीली धुँआ छोड़ रहा है?

— एबेलिटो

2

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

— नहीं

45

@ फ्रांस्वा पहल: मुख्य नुकसान खोजनीयता है: एचटीएमएल को देखकर आपको यह नहीं बताया जाता है कि कौन से कॉलबैक इससे जुड़े हैं, यहां तक कि कोई भी नहीं है।

— माइकल बोर्गवर्ड

1

@MichaelBorgwardt: मैं आपसे पूरी तरह सहमत हूं कि यह एक नुकसान है। यदि कोड अच्छी तरह से संरचित है और संगठित है, तो मैं इसे एक बड़े मुद्दे के रूप में नहीं देखता जब किसी प्रोजेक्ट पर काम कर रहा हो या किसी के साथ कोड बेस डिबग कर रहा हो। सामान्य तौर पर, जब मैं आपसे सहमत होता हूं, तो मुझे इन-लाइन स्क्रिप्ट लिखने का एक अच्छा कारण होने के लिए खोजशीलता दिखाई नहीं देती है, कोड परीक्षण क्षमता जैसे लाभ का लाभ और डोम से दूर अपने फ़ंक्शन / व्यवहार कोड को अलग करने की क्षमता। मैं नहीं कह रहा हूँ कि इन-लाइन कोड खराब है और काम नहीं करेगा। यह पूरी तरह से ठीक है और इस बात पर निर्भर करता है कि आप टेस्टीबिलिटी जैसी चीजों में दिलचस्पी रखते हैं या नहीं।

— नहीं

4

इस चर्चा का एक और बिंदु, नौसिखियों के साथ - onclickतत्व बातचीत और प्रभाव (फ़ंक्शन कॉल) के बीच अधिक स्पष्ट रूप से कारण संबंधों को मैप कर सकता है और साथ ही संज्ञानात्मक भार को कम कर सकता है। कई पाठ शिक्षार्थियों को फेंक देते हैं addEventListenerजो एक अधिक कठिन वाक्य रचना के अंदर कई और विचारों को पैक करता है। इसके अलावा, हाल के घटक आधारित ढांचे जैसे दंगा और प्रतिक्रिया onclickविशेषता का उपयोग करते हैं और इस बात की धारणा बदल रहे हैं कि अलगाव क्या होना चाहिए। HTML onclickसे एक ऐसे घटक में स्थानांतरित करना जो इसका समर्थन करता है, सीखने के लिए एक अधिक प्रभावी "चरण" प्रक्रिया हो सकती है।

— jmk2142

41

यदि आप jQuery का उपयोग कर रहे हैं तो:

HTML:

 <a id="openMap" href="/map/">link</a>

जे एस:

$(document).ready(function() {
    $("#openMap").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });
});

यह जेएस के बिना काम करने का लाभ है, या यदि उपयोगकर्ता मध्य लिंक पर क्लिक करता है।

इसका यह भी अर्थ है कि मैं फिर से लिखकर जेनेरिक पॉपअप को संभाल सकता हूं:

HTML:

 <a class="popup" href="/map/">link</a>

जे एस:

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), 300, 300, 'map');
        return false;
    });
});

इससे आप पॉपअप क्लास को देकर किसी भी लिंक पर पॉपअप जोड़ सकते हैं।

इस विचार को आगे भी बढ़ाया जा सकता है:

HTML:

 <a class="popup" data-width="300" data-height="300" href="/map/">link</a>

जे एस:

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
        return false;
    });
});

मैं अब अपनी पूरी साइट पर बहुत सारे पॉपअप के लिए एक ही बिट कोड का उपयोग कर सकता हूं, बिना ओनलीक सामान के भार लिखने के लिए! पुन: प्रयोज्य के लिए याय!

इसका मतलब यह भी है कि अगर बाद में मैं तय करता हूं कि पॉपअप खराब अभ्यास है, (जो वे कर रहे हैं!) और मैं उन्हें लाइटबॉक्स स्टाइल मोडल विंडो के साथ बदलना चाहता हूं, मैं बदल सकता हूं:

popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

सेवा

myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

और मेरी पूरी साइट पर मेरे सभी पॉपअप अब पूरी तरह से अलग तरीके से काम कर रहे हैं। मैं यह भी पता लगाने के लिए कि पॉपअप पर क्या करना है, या उन्हें अनुमति देने या न करने के लिए उपयोगकर्ताओं की प्राथमिकता संग्रहीत कर सकता हूं। इनलाइन ऑनक्लिक के साथ, इसके लिए एक विशाल प्रतिलिपि और चिपकाने के प्रयास की आवश्यकता होती है।

— धनी ब्रजवासी
स्रोत

4

जावास्क्रिप्ट के बिना काम करता है ?? यह jQuery है। यह काम करने के लिए ब्राउज़र पर सक्षम जावास्क्रिप्ट की आवश्यकता है, है ना?

— थॉमस शील्ड

2

हां, लेकिन लिंक इस मामले में जावास्क्रिप्ट के बिना कार्रवाई करने वाले पृष्ठ पर पुनर्निर्देशित कर सकता है।

— ThiefMaster

12

लिंक जावास्क्रिप्ट के बिना काम करता है। देखें कि लिंक में सामान्य href विशेषता कैसे है। यदि उपयोगकर्ता के पास जावास्क्रिप्ट नहीं है, तो लिंक अभी भी एक लिंक होगा और उपयोगकर्ता अभी भी सामग्री तक पहुंच सकता है।

— morewry

3

@ थोमस ढाल: नहीं, उसका मतलब है कि यदि आपके पास जावास्क्रिप्ट नहीं है, तो लिंक आपको अभी भी / मानचित्र पर ले जाएगा / ...

— रॉबर्ट

2

आह अमीर! हम सभी आपको इस निफ्टी समाधान के लिए प्यार करते हैं!

— निर्मल

21

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

आपने JS फाइल देखी होंगी जो इस तरह दिखती हैं ...

(function(){
    ...[some code]
}());

ये तुरंत लागू किए गए फ़ंक्शन अभिव्यक्तियाँ (IIFE) हैं और उनके भीतर घोषित कोई भी फ़ंक्शन केवल उनके आंतरिक दायरे में मौजूद होगा।

यदि आप function doSomething(){}एक IIFE के भीतर घोषित करते हैं, तो doSomething()अपने HTML पृष्ठ में एक तत्व की ऑनक्लिक क्रिया करें, आपको एक त्रुटि मिलेगी।

यदि, दूसरी ओर, आप उस IIFE के भीतर उस तत्व के लिए एक EventListener बनाते हैं और कॉल doSomething()करते हैं जब श्रोता एक क्लिक घटना का पता लगाता है, तो आप अच्छे हैं क्योंकि श्रोता और doSomething()IIFE के दायरे को साझा करते हैं।

कम से कम कोड वाली छोटी वेब ऐप्स के लिए, इससे कोई फर्क नहीं पड़ता। लेकिन अगर आप बड़े, बनाए रखने योग्य कोडबेस लिखना चाहते हैं, तो onclick=""यह एक आदत है जिससे आपको बचने के लिए काम करना चाहिए।

— LetMyPeopleCode
स्रोत

1

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

— कामिल कीलवस्की

20

यह कई कारणों से अच्छा नहीं है:

यह कोड और मार्कअप को मिलाता है
इस तरह से कोड लिखा जाता है eval
और वैश्विक दायरे में चलता है

सबसे सरल बात nameअपने <a>तत्व में एक विशेषता जोड़ना होगा , फिर आप कर सकते हैं:

document.myelement.onclick = function() {
    window.popup('/map/', 300, 300, 'map');
    return false;
};

यद्यपि आधुनिक सर्वोत्तम अभ्यास idएक नाम के बजाय उपयोग करना होगा , और उपयोग addEventListener()करने के बजाय इसका उपयोग करें onclickक्योंकि आप एक ही घटना में कई कार्यों को बांधने की अनुमति देता है।

— एल्निटैक
स्रोत

यहां तक कि इस तरह से सुझाव देना इवेंट हैंडलर टकराव के साथ उपयोगकर्ता को समस्याओं का एक गुच्छा तक खोलता है।

— उपदेश

3

@ इनलाइन इवेंट हैंडलर की तरह ही रिप्रेजेंटेशन करता है, इसलिए मेरा जवाब कहता है कि इसका इस्तेमाल करना बेहतर है addEventListener(), और क्यों।

— अलनीतक

2

क्या कोई इसे और समझा सकता है? "कोड इस तरह से लिखा गया है जो इस तरह से विकसित होता है" ... मुझे इस बारे में वेब पर कुछ नहीं मिला। क्या आप कह रहे हैं कि इनलाइन जावास्क्रिप्ट का उपयोग करने के लिए कुछ प्रदर्शन या सुरक्षा नुकसान हैं?

— मार्सैन्डबैक

12

कुछ कारण हैं:

मुझे यह मार्कअप, यानी HTML और क्लाइंट-साइड स्क्रिप्ट्स को अलग करने के लिए मुख्य रूप से सहायता करता है। उदाहरण के लिए, jQuery प्रोग्राम हैंडलर को प्रोग्रामेटिक रूप से जोड़ना आसान बनाता है।
आपके द्वारा दिया गया उदाहरण किसी भी उपयोगकर्ता एजेंट में टूट जाएगा जो जावास्क्रिप्ट का समर्थन नहीं करता है, या जावास्क्रिप्ट को बंद कर दिया है। प्रगतिशील वृद्धि की अवधारणा /map/जावास्क्रिप्ट के बिना उपयोगकर्ता एजेंटों के लिए एक सरल हाइपरलिंक को प्रोत्साहित करेगी , फिर जावास्क्रिप्ट का समर्थन करने वाले उपयोगकर्ता एजेंटों के लिए एक क्लिक हैंडलर को मुख्य रूप से जोड़ देगा।

उदाहरण के लिए:

मार्कअप:

<a id="example" href="/map/">link</a>

जावास्क्रिप्ट:

$(document).ready(function(){

    $("#example").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });

})

— ग्राहम
स्रोत

2

प्रगतिशील उन्नति की याद दिलाने के लिए धन्यवाद और इसलिए यह आज भी उस प्रतिमान पर फिट बैठता है:<a href="https://stackoverflow.com/map/" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

— डैनियल सोकॉल्स्की

10

संशोधन

विनीत जावास्क्रिप्ट दृष्टिकोण पास्ट में अच्छा था - विशेष रूप से एचटीएमएल में हैंडलर बाइंड की घटनाओं को बुरा व्यवहार माना जाता था (मुख्यतः क्योंकि येदिशनिंजाonclick events run in the global scope and may cause unexpected error द्वारा उल्लेख किया गया था )

तथापि...

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

<button (click)="someAction()">Click Me</button>

कच्चे js / html में इसके बराबर होगा

<button onclick="someAction()">Click Me</button>

अंतर यह है कि कच्चे जेएस onclickईवेंट को वैश्विक दायरे में चलाया जाता है - लेकिन फ्रेमवर्क इनकैप्सुलेशन प्रदान करते हैं।

तो समस्या कहां है?

समस्या तब होती है जब नौसिखिया प्रोग्रामर जो हमेशा यह सुनता है कि html-onclick खराब है और जो हमेशा उपयोग करता btn.addEventListener("onclick", ... )है, वह टेम्पलेट के साथ कुछ फ्रेमवर्क का उपयोग करना चाहता है ( कमियांaddEventListener भी हैं - अगर हम DOM को डायनेमिक तरीके से अपडेट करते हैं (जो कि बहुत तेज़ है ) - तो हम ढीली घटनाओं का उपयोग करते हैं हैंडलर उस तरह से बांधते हैं)। तब वह बुरी आदतों या फ्रेमवर्क के उपयोग के लिए गलत दृष्टिकोण जैसी किसी चीज़ का सामना करेगा - और वह बहुत बुरे तरीके से फ्रेमवर्क का उपयोग करेगा - क्योंकि वह मुख्य रूप से js-part पर ध्यान केंद्रित करेगा और टेम्पलेट-पार्ट पर नहीं (और अस्पष्ट और बनाए रखने के लिए कठिन है) कोड)। इस आदतों को बदलने के लिए वह बहुत समय ढीला कर देगा (और शायद उसे कुछ भाग्य और शिक्षक की आवश्यकता होगी)।innerHTML=

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

इसलिए क्या करना है?

हम विनीत जावास्क्रिप्ट दृष्टिकोण को अद्यतन कर सकते हैं और HTML में (अंततः साधारण मापदंडों के साथ) इवेंट हैंडलर को बांधने की अनुमति दे सकते हैं (लेकिन केवल हैंडलर को बाँध सकते हैं - ओपी क्सिटिटॉन की तरह ऑनक्लिक में तर्क नहीं डालें)। तो कच्चे जेएस / html में मेरी राय में यह अनुमति दी जानी चाहिए

<button onclick="someAction(3)">Click Me</button>

या

कोड स्निपेट दिखाएं

function popup(num,str,event) {
   let re=new RegExp(str);  
   // ... 
   event.preventDefault();
   console.log("link was clicked");
}

<a href="https://example.com" onclick="popup(300,'map',event)">link</a>

स्निपेट का विस्तार करें

लेकिन नीचे के उदाहरणों की अनुमति नहीं दी जानी चाहिए

<button onclick="console.log('xx'); someAction(); return true">Click Me</button>

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

वास्तविकता बदल जाती है, हमारा दृष्टिकोण भी होना चाहिए

— कामिल कियॉलेजवस्की
स्रोत

हाय कामिल, मैं जावास्क्रिप्ट में शुरुआत कर रहा हूं और ऑन्कलिक के उपयोग पर भी भ्रम का सामना करना पड़ा है, अर्थात, आप निम्न के रूप में ऑन्कलिक के नुकसान की व्याख्या कर सकते हैं: 1. आपके पास केवल एक इनलाइन ईवेंट सौंपा जा सकता है। 2. इनलाइन घटनाओं को DOM तत्व की संपत्ति के रूप में संग्रहीत किया जाता है और, सभी ऑब्जेक्ट गुणों की तरह, इसे अधिलेखित किया जा सकता है। 3. इस घटना के लिए आग जारी रहेगा भले ही आप onclick संपत्ति को हटा दें।

— मिर्ज़हल

1

विज्ञापन 1. हां केवल एक, हालांकि मेरा अनुभव (कोणीय के साथ) यह दर्शाता है कि यह ज्यादातर स्थितियों में पर्याप्त है - हालांकि यदि नहीं तो बस उपयोग करें addEventListener। विज्ञापन 2. हां उन्हें अधिलेखित किया जा सकता है (हालांकि आमतौर पर कोई भी ऐसा नहीं करता है) - समस्या कहां है? विज्ञापन 3. हैंडलर हटाने onclick attrib के बाद निकाल दिया जाएगा नहीं - सबूत यहाँ

— कामिल Kiełczewski

8

यह एक ~~नया~~ प्रतिमान है जिसे " विनीत जावास्क्रिप्ट " कहा जाता है । वर्तमान "वेब मानक" अलग कार्यक्षमता और प्रस्तुति के लिए कहता है।

यह वास्तव में एक "बुरा अभ्यास" नहीं है, यह सिर्फ इतना है कि अधिकांश नए मानक चाहते हैं कि आप इन-लाइनिंग जावास्क्रिप्ट के बजाय इवेंट श्रोताओं का उपयोग करें।

इसके अलावा, यह सिर्फ एक व्यक्तिगत बात हो सकती है, लेकिन मुझे लगता है कि जब आप इवेंट श्रोताओं का उपयोग करते हैं, तो यह पढ़ना बहुत आसान है, खासकर यदि आपके पास 1 से अधिक जावास्क्रिप्ट स्टेटमेंट हैं, जिन्हें आप चलाना चाहते हैं।

— रॉकेट हज़मत
स्रोत

2

इस विषय पर विकिपीडिया पृष्ठ 4 वर्ष से अधिक पुराना है। यह किसी भी अधिक एक नया प्रतिमान नहीं है। :)

— क्वेंटिन

@ डेविड: यह "नया" नहीं हो सकता है, लेकिन ऐसे लोग हैं जो अभी भी इसका उपयोग नहीं कर रहे हैं, इसलिए यह उनके लिए "नया" है।

— रॉकेट हज़मत

6

आपके प्रश्न से मुझे लगता है कि चर्चा शुरू हो जाएगी। सामान्य विचार यह है कि व्यवहार और संरचना को अलग करना अच्छा है। इसके अलावा, afaik, एक इनलाइन क्लिक हैंडलर को evalएक वास्तविक जावास्क्रिप्ट फ़ंक्शन 'बनने' के लिए नेतृत्व करना होगा। और यह बहुत पुराने ज़माने की बात है, कि यह एक बहुत ही अस्थिर तर्क है। आह, ठीक है, इसके बारे में कुछ पढ़ें @ quirksmode.org

— KooiInc
स्रोत

\: मैं एक बार फिर पवित्र युद्ध बना सकता हूँ नहीं करना चाहते, मैं सच को खोजने के लिए कोशिश कर रहा हूँ

— Nill

2

वैश्विक दायरे में ऑनक्लिक घटनाएं चलती हैं और अप्रत्याशित त्रुटि हो सकती हैं।
कई DOM तत्वों में onclick ईवेंट जोड़ने से
प्रदर्शन और दक्षता धीमी हो जाएगी ।

— Minghuan
स्रोत

0

इनलाइन हैंडलर का उपयोग नहीं करने के दो और कारण:

वे थकाऊ भागने के मुद्दों की आवश्यकता कर सकते हैं

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

const str = prompt('What string to display on click?', 'foo\'"bar');
const escapedStr = str
  // since the attribute value is going to be using " delimiters,
  // replace "s with their corresponding HTML entity:
  .replace(/"/g, '&quot;')
  // since the string literal inside the attribute is going to delimited with 's,
  // escape 's:
  .replace(/'/g, "\\'");
  
document.body.insertAdjacentHTML(
  'beforeend',
  '<button onclick="alert(\'' + escapedStr + '\')">click</button>'
);

स्निपेट का विस्तार करें

यह अविश्वसनीय रूप से बदसूरत है। उपरोक्त उदाहरण से, यदि आप 's को प्रतिस्थापित नहीं करते हैं , तो एक SyntaxError परिणाम देगा, क्योंकि alert('foo'"bar')मान्य सिंटैक्स नहीं है। यदि आपने "s को प्रतिस्थापित नहीं किया है , तो ब्राउज़र इसे onclickविशेषता के अंत के रूप में व्याख्या करेगा (साथ सीमांकित)" ऊपर s के ), जो कि गलत भी होगा।

यदि कोई आदतन इनलाइन हैंडलर का उपयोग करता है, तो हर बार उपरोक्त के समान (और इसे सही करने के लिए ) याद रखना सुनिश्चित करना होगा , जो एक नज़र में समझने में कठिन और कठिन हो। इनलाइन हैंडलर्स से पूरी तरह से बचने के लिए बेहतर है ताकि एक साधारण क्लोजर में मनमाने तार का इस्तेमाल किया जा सके:

const str = prompt('What string to display on click?', 'foo\'"bar');
const button = document.body.appendChild(document.createElement('button'));
button.textContent = 'click';
button.onclick = () => alert(str);

स्निपेट का विस्तार करें

इतना अच्छा नहीं है?

एक इनलाइन हैंडलर की गुंजाइश श्रृंखला बेहद अजीब है

आपको क्या लगता है कि निम्नलिखित कोड लॉग करेगा?

let disabled = true;

<form>
  <button onclick="console.log(disabled);">click</button>
</form>

स्निपेट का विस्तार करें

इसे आज़माएं, स्निपेट चलाएं। यह शायद वह नहीं है जो आप उम्मीद कर रहे थे। यह जो करता है उसका उत्पादन क्यों करता है? क्योंकि इनलाइन हैंडलर withब्लॉक के अंदर चलते हैं। उपरोक्त कोड तीन with ब्लॉकों के अंदर है : एक के लिए document, एक के लिए <form>, और एक के लिए <button>:

कोड स्निपेट दिखाएं

let disabled = true;

<form>
  <button onclick="console.log(disabled);">click</button>
</form>

स्निपेट का विस्तार करें

चूंकि disabledबटन की एक संपत्ति है, disabledइनलाइन हैंडलर के अंदर संदर्भित करना बटन की संपत्ति को संदर्भित करता है, बाहरी disabledचर को नहीं। यह काफी जवाबी है। withकई समस्याएं हैं: यह भ्रामक कीड़े का स्रोत हो सकता है और कोड को धीमा कर सकता है। यह सख्त मोड में बिल्कुल भी अनुमति नहीं है। लेकिन इनलाइन हैंडलर्स के साथ, आपको s के माध्यम से कोड चलाने के लिए मजबूर किया जाता है with- और न केवल एक के माध्यम से with, बल्कि कई नेस्टेड withs के माध्यम से । यह पागलपन है।

withकभी भी कोड में उपयोग नहीं किया जाना चाहिए। क्योंकि इनलाइन हैंडलर को withअपने सभी भ्रामक व्यवहार के साथ-साथ आवश्यक रूप से इनलाइन हैंडलर से भी बचना चाहिए।

— CertainPerformance
स्रोत

HTML में onClick () का उपयोग एक बुरा अभ्यास क्यों है?

संशोधन

तथापि...

तो समस्या कहां है?

इसलिए क्या करना है?

वे थकाऊ भागने के मुद्दों की आवश्यकता कर सकते हैं

एक इनलाइन हैंडलर की गुंजाइश श्रृंखला बेहद अजीब है