जावास्क्रिप्ट (HTML में) कैसे काम करता है?

129

मुझे पता है कि यह बुरा अभ्यास है। यदि संभव हो तो इस तरह कोड न लिखें।

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

जब कुछ ऐसा लिखा जाता है (और संभावित नुकसान) पूरी तरह से समझने के हित में मैं इस प्रश्न का अनुसरण कर रहा हूं:

<a href="#" onclick="alert('Hi')">Click Me</a>

जहां तक मैं बता सकता हूं यह कार्यात्मक रूप से उसी के समान है

<script type="text/javascript">
   $(function(){ // I use jQuery in this example
       document.getElementById('click_me').onclick = 
           function () { alert('Hi'); };
   });
</script>
<a href="#" id="click_me">Click Me</a>

इससे यह पता चलता है कि विशेषता onclickको सौंपे गए स्ट्रिंग को एक अनाम फ़ंक्शन के भीतर डाला गया है जो तत्व के क्लिक हैंडलर को सौंपा गया है। क्या वास्तव में ऐसा है?

क्योंकि मैं इस तरह की चीजें करना शुरू कर रहा हूं:

<a href="#" onclick="$(this).next().fadeIn(); return false;">Display my next sibling</a> <!-- Return false in handler so as not to scroll to top of page! -->

जो काम करता है। लेकिन मुझे नहीं पता कि यह कितना हैक है। यह संदेहास्पद लग रहा है क्योंकि कोई भी स्पष्ट कार्य नहीं है जिसे वापस किया जा रहा है!

आप पूछ सकते हैं, आप ऐसा क्यों कर रहे हैं, स्टीव? इनलाइन JS ख़राब है!

अच्छी तरह से ईमानदार होने के लिए मैं कोड के तीन अलग-अलग अनुभागों को संपादित करने के लिए थक गया हूं, केवल एक पृष्ठ के एक अनुभाग को संशोधित करने के लिए, खासकर जब मैं सिर्फ यह देखने के लिए कुछ प्रोटोटाइप कर रहा हूं कि क्या यह बिल्कुल काम करेगा। यह इतना आसान है और कभी-कभी विशेष रूप से इस HTML तत्व से संबंधित कोड को तत्व के भीतर परिभाषित करने के लिए भी समझ में आता है : जब मैं 2 मिनट बाद फैसला करता हूं कि यह एक भयानक, भयानक विचार था जो मैं पूरे div (या जो कुछ भी कर सकता हूं) ) और मेरे पास रहस्यमय जेएस और सीएसएस cruft का एक गुच्छा नहीं है, जो बाकी पेज पर घूम रहा है, जो कभी-कभी थोड़ा धीमा होता है। यह संदर्भ की स्थानीयता की अवधारणा के समान है, लेकिन कैश मिस के बजाय हम बग और कोड ब्लोट देख रहे हैं।

javascript html

— स्टीवन लू
स्रोत

3

आप सही हैं, यह एक अनाम फ़ंक्शन है।

— भामलीन

1

आपको पहले से ही #click_meईवेंट के लिए क्वेरी को हुक करने की आवश्यकता होगी , या स्क्रिप्ट को नोड के बाद रखें।

— बरगी

1

एक कंसोल में, करते हैं document.getElementById("click_me").onclick;। या इसे सचेत करें। आप देखेंगे कि यह एक फंक्शन में है।

— डी। स्ट्रैट

96

आपने इसे लगभग सही कर लिया है, लेकिन आपने thisइनलाइन कोड को दिए गए मूल्य का हिसाब नहीं दिया है ।

<a href="#" onclick="alert(this)">Click Me</a>

वास्तव में इसके करीब है:

<a href="#" id="click_me">Click Me</a>
<script type="text/javascript">
document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        alert(this);
    }).call(document.getElementById('click_me'), event);
});
</script>

इनलाइन ईवेंट हैंडलर घटना thisके लक्ष्य के बराबर सेट होते हैं । आप इनलाइन स्क्रिप्ट में अनाम फ़ंक्शन का भी उपयोग कर सकते हैं

<a href="#" onclick="(function(){alert(this);})()">Click Me</a>

— apsillers
स्रोत

7

टैग के बाद स्क्रिप्ट आनी चाहिए, अन्यथा यह निष्पादित होने पर टैग मौजूद नहीं है - मैं यह दर्शाने के लिए आपके उत्तर को बदलने का सुझाव देता हूं।

— अपरिष्कृत

मैं eventएक इनलाइन के साथ कैसे प्रचार करूं onclick='myFunction(event)'??

— ओल्डबॉय

9

आपके द्वारा प्राप्त किए जाने पर ब्राउज़र क्या करता है

<a onclick="alert('Hi');" ... >

"ओनलीक" के वास्तविक मूल्य को प्रभावी रूप से किसी चीज़ पर सेट करना है:

new Function("event", "alert('Hi');");

यही है, यह एक फ़ंक्शन बनाता है जो "इवेंट" पैरामीटर की अपेक्षा करता है। (ठीक है, IE नहीं है; यह एक सादे सरल अनाम फ़ंक्शन की तरह अधिक है।)

— नुकीले
स्रोत

2

आह। तो मैं वास्तव में मेरी इनलाइन जेएस स्निपेट से eventघटना को पुनः प्राप्त करने के लिए चर का उपयोग कर सकता हूं (और इसके माध्यम से मूल तत्व event.target)! ठंडा।

— स्टीवन लू

1

IE वास्तव में eventपैरामीटर को पारित नहीं करता है , लेकिन यदि आप eventइस अनाम फ़ंक्शन के अंदर उपयोग करते हैं तो IE इसे वास्तविक ईवेंट ऑब्जेक्ट के रूप में समझेगा। जैसा कि अनाम फ़ंक्शन windowIE में ऑब्जेक्ट की संपत्ति के रूप में सेट किया गया है , इसे इस रूप में देखेंगे window.event।

— rdleal

8

बहुत बुरा अभ्यास लगता है कि ईवेंट हैंडलर एट्रिब्यूट्स के आसपास जा रहा है। खराब अभ्यास उपलब्ध सुविधाओं का पता नहीं है और उपयोग नहीं कर रहा है जहां यह सबसे उपयुक्त है। इवेंट विशेषताएँ पूरी तरह से W3C प्रलेखित मानक हैं और उनके बारे में कुछ भी बुरा नहीं है। यह इनलाइन स्टाइल रखने से अलग नहीं है, जो W3C डॉक्यूमेंटेड भी है और समय में उपयोगी हो सकता है। चाहे आप इसे स्क्रिप्ट टैग में लपेटते हैं या नहीं, यह उसी तरह व्याख्यायित किया जाएगा।

https://www.w3.org/TR/html5/webappapis.html#event-handler-idl-attributes

— डैनियल बी
स्रोत

2

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

— स्टीवन लू

1

और यह एक उचित वैध तर्क है, जिस पर मैं सहमत हूं। मैं आम तौर पर इनलाइन स्क्रिप्टिंग को नहीं जोड़ता, न ही उस मैटर के लिए, खुद को स्टाइल करता हूं। लेकिन लोगों का स्वाद अलग है। उदाहरण के लिए कई लोग बॉडी सेक्शन में स्क्रिप्ट और स्टाइल टैग जोड़ना पसंद करते हैं, मैं इसे बर्दाश्त नहीं कर सकता। लेकिन यह वैध है और कुछ लोग इसे पसंद करते हैं। bad practice/spaghettificationकुछ के लिए क्या सीम पसंद है good practice/structure, दूसरों के लिए है।

— डेनियल बी

मैं github.com/styled-compenders/styled-compenders को देख रहा हूं और यदि आप इसे प्रतिक्रिया के साथ जोड़ते हैं, उदाहरण के लिए, अब हमारे पास आपके ऐप के एक घटक के साथ जुड़ी हुई सब कुछ वास्तव में एक साथ (उम्मीद है कि शांति से) एक ही स्थान पर रह रहे हैं। और यह वास्तव में भयानक नहीं दिखता है। प्रगति की तरह महसूस करता है। इस प्रकाश में, इनलाइन शैलियों और HTML में कोड को जाम करना सही तरीका नहीं है (अब तक यह HTML और JS कोड में शैलियों का ठेला लगता है)।

— स्टीवन लू

5

अपने प्रश्न का उत्तर देने का सबसे अच्छा तरीका यह है कि आप इसे कार्रवाई में देखें ।

<a id="test" onclick="alert('test')"> test </a>

जेएस में

var test = document.getElementById('test');
console.log( test.onclick );

जैसा कि आप देख रहे हैं console, यदि आप क्रोम का उपयोग कर रहे हैं, तो यह एक गुमनाम फंक्शन प्रिंट करता है, जिसमें ईवेंट ऑब्जेक्ट पास हुआ है, हालांकि यह IE में थोड़ा अलग है।

function onclick(event) {
   alert('test')
}

मैं इनलाइन इवेंट हैंडलर के बारे में आपके कुछ बिंदुओं से सहमत हूं। हां उन्हें लिखना आसान है, लेकिन मैं कई स्थानों पर कोड बदलने के बारे में आपकी बात से सहमत नहीं हूं, यदि आप अपने कोड को अच्छी तरह से संरचना करते हैं, तो आपको ऐसा करने की आवश्यकता नहीं है।

— अजीज पजानी
स्रोत

मुझे लगता है कि कुछ ऐसा है जो <button onclick="login()"> test login </button>प्रोटोटाइप के लिए बिल्कुल ठीक है। आप किसी ऐसी चीज़ का परीक्षण करना चाहते हैं जिसके लिए अभी उपयोगकर्ता सहभागिता की आवश्यकता है, और आप इसे बाद में वैसे भी हटाने जा रहे हैं। सभी जगह अतिरिक्त कोड क्यों लिखें?

— डग नबबिट

यह अतिरिक्त कोड नहीं है, बस एक अतिरिक्त अनाम फ़ंक्शन है। और यह सभी जगह नहीं है, यह वास्तव में स्क्रिप्ट टैग में एक ही स्थान पर है।

— अजीज पजानी

मुझे यकीन नहीं है कि हम "आपके कोड को अच्छी तरह से संरचित करने" का एक ही विचार साझा करते हैं। यदि आप UI को अपने "कोर फ़ंक्शंस" में उस स्थान पर बाँधते हैं जहाँ आपके कोर फ़ंक्शंस वास्तव में रहते हैं, तो यह मुझे यूआई में बाध्यकारी करने की तुलना में एक बदतर युग्मन व्यवस्था की तरह लगता है। मैं आमतौर पर सभी यूआई बाइंडिंग सामान को मुख्य सामान से अलग रखता हूं, और मुझे लगता है कि ओपी भी हो सकता है ...

— डग नबबिट

3

यह संदेहास्पद लग रहा है क्योंकि कोई भी स्पष्ट कार्य नहीं है जिसे वापस किया जा रहा है!

यह एक अनाम फ़ंक्शन है जिसे ऑब्जेक्ट के क्लिक इवेंट से जोड़ा गया है।

तुम ऐसा क्यों कर रहे हो, स्टीव?

पृथ्वी पर आप क्यों कर रहे हैं ..... आह, जैसा कि आपने उल्लेख किया है, यह वास्तव में व्यापक रूप से बुरा व्यवहार अपनाया गया है :)

— mattytommo
स्रोत

3

कंसोल में यह प्रयास करें:

var div = document.createElement('div');

div.setAttribute('onclick', 'alert(event)');

div.onclick

क्रोम में, यह इसे दिखाता है:

function onclick(event) {
  alert(event)
}

... और गैर-मानक nameसंपत्ति div.onclickहै "onclick"।

इसलिए, यह अनाम है या नहीं यह आपकी "अनाम" की परिभाषा पर निर्भर करता है। कुछ के साथ तुलना करें var foo = new Function(), जहां foo.nameएक खाली स्ट्रिंग है, और foo.toString()कुछ ऐसा उत्पादन करेगा

function anonymous() {

}

— डग नबबट
स्रोत

यह पॉइंटी के जवाब पर एक टिप्पणी के रूप में शुरू हुआ, लेकिन वास्तव में एक टिप्पणी के रूप में काम नहीं किया। मुझे लगता है कि उनका वास्तव में सबसे अच्छा जवाब है।

— डग नबबिट