addEventListener बनाम onclick

Question

बीच क्या अंतर है addEventListenerऔर onclick?

var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);

उपरोक्त कोड एक अलग .js फ़ाइल में एक साथ रहता है, और वे दोनों पूरी तरह से काम करते हैं।

Answer 1

दोनों सही हैं, लेकिन उनमें से कोई भी प्रति "सर्वश्रेष्ठ" नहीं है, और एक कारण हो सकता है कि डेवलपर ने दोनों दृष्टिकोणों का उपयोग करने के लिए चुना।

इवेंट श्रोता (addEventListener और IE के अटैचमेंट)

Internet Explorer के पुराने संस्करण जावास्क्रिप्ट को हर दूसरे ब्राउज़र से बहुत अलग तरीके से कार्यान्वित करते हैं। 9 से कम संस्करणों के साथ, आप इस तरह attachEvent[ doc ] विधि का उपयोग करते हैं :

element.attachEvent('onclick', function() { /* do stuff here*/ });

(आईई 9 और इसके बाद के संस्करण सहित) सबसे अन्य ब्राउज़रों में आप का उपयोग addEventListener[ डॉक इस तरह],:

element.addEventListener('click', function() { /* do stuff here*/ }, false);

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

ऊपर दिए गए उदाहरण एक अनाम फ़ंक्शन [ doc ] का उपयोग करते हैं । आप एक फंक्शन रेफरेंस [ डॉक ] या क्लोजर [ डॉक ] का उपयोग करके एक ईवेंट श्रोता को भी जोड़ सकते हैं :

var myFunctionReference = function() { /* do stuff here*/ }

element.attachEvent('onclick', myFunctionReference);
element.addEventListener('click', myFunctionReference , false);

की एक अन्य महत्वपूर्ण विशेषता addEventListenerअंतिम पैरामीटर है, जो नियंत्रित करता है कि श्रोता बुदबुदाते हुए घटनाओं पर कैसे प्रतिक्रिया करता है [ doc ]। मैं उदाहरणों में गलत पारित कर रहा हूं, जो शायद 95% उपयोग के मामलों के लिए मानक है। attachEventइनलाइन घटनाओं का उपयोग करते समय या इसके लिए कोई समान तर्क नहीं है ।

इनलाइन ईवेंट (HTML onclick = "" property and element.onclick)

जावास्क्रिप्ट का समर्थन करने वाले सभी ब्राउज़रों में, आप एक ईवेंट श्रोता इनलाइन डाल सकते हैं, जिसका अर्थ है HTML कोड। आपने शायद यह देखा है:

<a id="testing" href="#" onclick="alert('did stuff inline');">Click me</a>

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

आपके द्वारा उल्लेखित दूसरी विधि:

element.onclick = function () { /*do stuff here */ };

... इनलाइन जावास्क्रिप्ट के बराबर है सिवाय इसके कि आपके पास स्कोप का अधिक नियंत्रण है (क्योंकि आप HTML के बजाय स्क्रिप्ट लिख रहे हैं) और अनाम फ़ंक्शन, फ़ंक्शन संदर्भ और / या क्लोज़र का उपयोग कर सकते हैं।

इनलाइन घटनाओं के साथ महत्वपूर्ण दोष यह है कि ऊपर वर्णित घटना श्रोताओं के विपरीत, आपके पास केवल एक इनलाइन घटना हो सकती है। इनलाइन घटनाओं को तत्व [ डॉक ] की विशेषता / संपत्ति के रूप में संग्रहीत किया जाता है , जिसका अर्थ है कि इसे अधिलेखित किया जा सकता है।

<a>ऊपर दिए गए HTML से उदाहरण का उपयोग करना :

var element = document.getElementById('testing');
element.onclick = function () { alert('did stuff #1'); };
element.onclick = function () { alert('did stuff #2'); };

... जब आप तत्व पर क्लिक करते हैं, तो आपको केवल "Did stuff # 2" दिखाई देगा - आपने onclickदूसरे मान के साथ संपत्ति का पहला असाइनमेंट ओवरवोट किया , और आपने मूल इनलाइन HTML onclickप्रॉपर्टी को भी अधिलेखित कर दिया । यहाँ देखें: http://jsfiddle.net/jpgah/ ।

मोटे तौर पर, इनलाइन घटनाओं का उपयोग न करें । इसके लिए विशिष्ट उपयोग के मामले हो सकते हैं, लेकिन यदि आप 100% सुनिश्चित नहीं हैं कि आपके पास उस उपयोग का मामला है, तो आप इनलाइन घटनाओं का उपयोग न करें और न करें।

आधुनिक जावास्क्रिप्ट (कोणीय और पसंद)

चूंकि यह जवाब मूल रूप से पोस्ट किया गया था, एंगुलर जैसे जावास्क्रिप्ट फ्रेमवर्क कहीं अधिक लोकप्रिय हो गए हैं। आपको एक कोणीय टेम्पलेट में इस तरह कोड दिखाई देगा:

<button (click)="doSomething()">Do Something</button>

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

बेस्ट कौन सा है?

सवाल ब्राउज़र संगतता और आवश्यकता का मामला है। क्या आपको एक से अधिक घटनाओं को एक तत्व में संलग्न करने की आवश्यकता है? क्या आप भविष्य में होंगे? अजीब हैं, आप करेंगे। संलग्न और addEventListener आवश्यक हैं। यदि नहीं, तो इनलाइन घटना से ऐसा लग सकता है कि वे चाल चलेंगे, लेकिन आप भविष्य के लिए बेहतर तरीके से तैयारी कर रहे हैं, हालांकि यह असंभव नहीं लग सकता है, कम से कम पूर्वानुमान है। एक मौका है कि आपको जेएस-आधारित ईवेंट श्रोताओं के पास जाना होगा, ताकि आप वहां से शुरू कर सकें। इनलाइन घटनाओं का उपयोग न करें।

jQuery और अन्य जावास्क्रिप्ट फ्रेमवर्क जेनेरिक मॉडल में DOM स्तर 2 की घटनाओं के विभिन्न ब्राउज़र कार्यान्वयन को अतिक्रमण करते हैं ताकि आप एक विद्रोही के रूप में IE के इतिहास के बारे में चिंता किए बिना क्रॉस-ब्राउज़र अनुरूप कोड लिख सकें। JQuery के साथ एक ही कोड, सभी क्रॉस-ब्राउज़र और रॉक के लिए तैयार:

$(element).on('click', function () { /* do stuff */ });

हालांकि बाहर मत भागो और सिर्फ एक चीज के लिए एक रूपरेखा प्राप्त करें, हालांकि। पुराने ब्राउज़रों की देखभाल करने के लिए आप आसानी से अपनी छोटी उपयोगिता को रोल कर सकते हैं:

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// example
addEvent(
    document.getElementById('myElement'),
    'click',
    function () { alert('hi!'); }
);

इसे आज़माएं: http://jsfiddle.net/bmArj/

उस सब को ध्यान में रखते हुए, जब तक कि आप जिस स्क्रिप्ट को देख रहे हैं, वह ब्राउज़र के अंतर को किसी और तरीके से ध्यान में रखे (कोड में आपके प्रश्न में नहीं दिखाया गया), addEventListenerIE का उपयोग करने वाला भाग 9 से कम संस्करणों में काम नहीं करेगा।

प्रलेखन और संबंधित पढ़ना

• W3 HTML विनिर्देशन, तत्व ईवेंट हैंडलर विशेषताएँ
• MDN पर element.addEventListener
• element.attachEvent MSDN पर
• Jquery.on
• quirksmode ब्लॉग "घटनाओं का परिचय"
• Google पर CDN द्वारा होस्ट की गई जावास्क्रिप्ट लाइब्रेरी

Comments

टक्कर के लिए खेद है, लेकिन सिर्फ अपने समारोह का एक संक्षिप्त संस्करण देना चाहता था (फिडल: jsfiddle.net/bmArj/153 ) -function addEvent(element, myEvent, fnc) { return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false)); }

— डेरेक

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

— क्रिस बेकर

जब तक हम इस एल्गोरिथ्म को संघनित कर रहे हैं, तब तक हम सभी तरह से जा सकते हैं: function addEvent(e,n,f){return e.attachEvent?e.attachEvent('on'+n,f):e.addEventListener(n,f,!!0)}<< 98 वर्णों पर, यह 40% से अधिक छोटा है!

— ट्रेवर

@Trevor जिज्ञासा से बाहर, क्यों !! 0? क्यों नहीं! १ या सिर्फ ०?

— क्रिस बेकर

@ AdrianMoisa यह उत्तर उस समय लिखा गया था जब AngularJS वृद्धि पर एक नई बात थी, और आम प्रथा अभी भी "प्रगतिशील वृद्धि" थी - अर्थात, HTML दस्तावेज़ को इस तरह से लिखना कि जावास्क्रिप्ट के साथ या उसके बिना काम करेगा। उस परिप्रेक्ष्य में, जावास्क्रिप्ट से घटनाओं को बांधना सबसे अच्छा अभ्यास होगा। आजकल, मुझे नहीं लगता कि कई लोग प्रगतिशील वृद्धि के बारे में बहुत अधिक चिंता करते हैं, विशेष रूप से एंगुलर जैसे सामान की व्यापकता पर विचार नहीं कर रहे हैं। इनलाइन घटनाओं (कोणीय का उपयोग नहीं करने) के बारे में चिंताओं के तर्क में अभी भी कुछ अलगाव है, लेकिन यह पदार्थ की तुलना में अधिक शैली है।

— क्रिस बेकर

Answer 2

यदि आप एक और काम करते हैं तो अंतर आप देख सकते हैं:

var h = document.getElementById('a');
h.onclick = doThing_1;
h.onclick = doThing_2;

h.addEventListener('click', doThing_3);
h.addEventListener('click', doThing_4);

कार्य 2, 3 और 4 कार्य, लेकिन 1 नहीं करता है। ऐसा इसलिए है क्योंकि addEventListenerमौजूदा ईवेंट हैंडलर को अधिलेखित नहीं करता है, जबकि onclickकिसी भी मौजूदा onclick = fnईवेंट हैंडलर को ओवरराइड करता है ।

अन्य महत्वपूर्ण अंतर, ज़ाहिर है, यह onclickहमेशा काम करेगा, जबकि addEventListenerसंस्करण 9 से पहले इंटरनेट एक्सप्लोरर में काम नहीं करता है । आप IE <9 में अनुरूप attachEvent(जो थोड़ा अलग वाक्यविन्यास है) का उपयोग कर सकते हैं ।

Comments

यह एक बहुत ही स्पष्ट व्याख्या है! राइट टू दी पॉइंट। इसलिए अगर मुझे एक घटना के लिए कई कार्यों की आवश्यकता है, तो मैं addEventListener के साथ फंस गया हूं, और मुझे IE को समायोजित करने के लिए संलग्नक के लिए अधिक कोड लिखना होगा।

— विलियम शाम

2, 3, और 4 को दोसमेल नाम दिया जाना चाहिए। 1 2 से ओवरराइड हो जाता है और कभी नहीं बुलाया जाता है।

— ड्रैगनलॉर्ड

वास्तव में एक बहुत ही स्पष्ट और स्पष्ट व्याख्या। ऐसा हो कि यह वास्तव में 'doThing_1', आदि (यदि आप अभी भी IE <9 के लिए पूरा करना चाहते हैं, तो क्रिस का जवाब देखें) नाम का अधिक अर्थ निकालेंगे।

— फ्रैंक कॉनिज

Answer 3

इस उत्तर में मैं DOM ईवेंट हैंडलर को परिभाषित करने के तीन तरीकों का वर्णन करूँगा।

element.addEventListener()

कोड उदाहरण:

const element = document.querySelector('a');
element.addEventListener('click', event => event.preventDefault(), true);

<a href="//google.com">Try clicking this link.</a>

element.addEventListener() कई फायदे हैं:

• आपको असीमित ईवेंट हैंडलर्स को पंजीकृत करने और उनके साथ निकालने की अनुमति देता है element.removeEventListener()।
• है useCaptureपैरामीटर, जो इंगित करता आप अपने में घटना को संभालने के लिए चाहते हैं या नहीं कैप्चरिंग या चरण बुदबुदाती । देखें: addEventListener में useCapture विशेषता को समझने में असमर्थ ।
• शब्दार्थ की परवाह करता है । मूल रूप से, यह ईवेंट हैंडलर्स को अधिक स्पष्ट रूप से पंजीकृत करता है। एक शुरुआत के लिए, एक फ़ंक्शन कॉल यह स्पष्ट करता है कि कुछ होता है , जबकि DOM तत्व की कुछ संपत्ति को ईवेंट असाइन करना कम से कम सहज नहीं है।
• आपको दस्तावेज़ संरचना (HTML) और तर्क (जावास्क्रिप्ट) को अलग करने की अनुमति देता है । छोटे वेब अनुप्रयोगों में यह बात नहीं लग सकती है, लेकिन यह किसी भी बड़ी परियोजना के साथ मायने रखती है। यह एक परियोजना को बनाए रखने के लिए बहुत आसान है जो एक ऐसी परियोजना की तुलना में संरचना और तर्क को अलग करता है जो नहीं करता है।
• सही ईवेंट नामों के साथ भ्रम को समाप्त करता है। इनलाइन ईवेंट श्रोताओं का उपयोग करने या .oneventDOM श्रोताओं के गुणों के लिए ईवेंट श्रोताओं को असाइन करने के कारण , बहुत से अनुभवहीन जावास्क्रिप्ट प्रोग्रामर सोचते हैं कि ईवेंट का नाम उदाहरण के लिए है onclickया onload। onहै न घटना नाम का एक हिस्सा । सही ईवेंट नाम हैं clickऔर load, और ईवेंट नाम कैसे पास किए जाते हैं .addEventListener()।
• लगभग सभी ब्राउज़र में काम करता है । यदि आपको अभी भी IE <= 8 का समर्थन करना है, तो आप एमडीएन से एक पॉलीफिल का उपयोग कर सकते हैं ।

element.onevent = function() {}(जैसे onclick, onload)

कोड उदाहरण:

const element = document.querySelector('a');
element.onclick = event => event.preventDefault();

<a href="//google.com">Try clicking this link.</a>

यह DOM 0. में इवेंट हैंडलर्स को रजिस्टर करने का एक तरीका था। अब यह हतोत्साहित है, क्योंकि यह:

• आपको केवल एक ईवेंट हैंडलर को पंजीकृत करने की अनुमति देता है । असाइन किए गए हैंडलर को हटाना भी सहज नहीं है, क्योंकि इस पद्धति का उपयोग करके असाइन किए गए ईवेंट हैंडलर को निकालने के लिए, आपको oneventसंपत्ति को उसकी प्रारंभिक स्थिति (यानी null) पर वापस करना होगा ।
• उचित रूप से त्रुटियों का जवाब नहीं देता है । उदाहरण के लिए, यदि आप गलती से स्ट्रिंग को असाइन करते हैं window.onload, उदाहरण के लिए:, window.onload = "test";यह किसी भी त्रुटि को नहीं फेंकेगा। आपका कोड काम नहीं करेगा और यह पता लगाना बहुत मुश्किल होगा कि ऐसा क्यों है। .addEventListener()हालाँकि, त्रुटि को फेंक देगा (कम से कम फ़ायरफ़ॉक्स में): TypeError: EventTarget.addEventListener का तर्क 2 कोई वस्तु नहीं है ।
• यह चुनने का एक तरीका प्रदान नहीं करता है कि क्या आप ईवेंट को उसके कैप्चरिंग या बबलिंग चरण में संभालना चाहते हैं।

इनलाइन घटना संचालकों ( oneventHTML विशेषता)

कोड उदाहरण:

<a href="//google.com" onclick="event.preventDefault();">Try clicking this link.</a>

इसी तरह element.onevent, यह अब हतोत्साहित है। मुद्दों के अलावा element.onevent, यह है:

• एक संभावित सुरक्षा मुद्दा है , क्योंकि यह XSS को अधिक हानिकारक बनाता है। आजकल वेबसाइटों को Content-Security-Policyइनलाइन स्क्रिप्ट को ब्लॉक करने के लिए उचित HTTP हेडर भेजने चाहिए और केवल विश्वसनीय डोमेन से बाहरी स्क्रिप्ट की अनुमति देनी चाहिए। देख कि सामग्री सुरक्षा नीति कैसे काम करती है?
• दस्तावेज़ संरचना और तर्क को अलग नहीं करता है ।
• यदि आप सर्वर-साइड स्क्रिप्ट के साथ अपना पेज बनाते हैं, और उदाहरण के लिए आप एक सौ लिंक जेनरेट करते हैं, तो प्रत्येक इनलाइन ईवेंट हैंडलर के साथ, आपका कोड ईवेंट हैंडलर को केवल एक बार परिभाषित करने की तुलना में अधिक लंबा होगा। इसका मतलब है कि ग्राहक को अधिक सामग्री डाउनलोड करनी होगी, और इसके परिणामस्वरूप आपकी वेबसाइट धीमी होगी।

यह सभी देखें

• EventTarget.addEventListener()प्रलेखन (MDN)
• EventTarget.removeEventListener()प्रलेखन (MDN)
• onclick बनाम addEventListener
• डोम-घटनाओं टैग विकी

Answer 4

जबकि onclickसभी ब्राउज़रों में काम करता है, addEventListenerइंटरनेट एक्सप्लोरर के पुराने संस्करणों में काम नहीं करता है, जो attachEventइसके बजाय उपयोग करता है ।

नकारात्मक पक्ष यह onclickहै कि केवल एक ईवेंट हैंडलर हो सकता है, जबकि अन्य दो सभी पंजीकृत कॉलबैक को आग लगा देंगे।

Answer 5

जहां तक ​​मुझे पता है, डोम "लोड" घटना अभी भी केवल बहुत सीमित काम करती है। इसका मतलब है कि यह केवल उदाहरण के लिए window object, imagesऔर <script>तत्वों के लिए आग लगाएगा। वही प्रत्यक्ष onloadअसाइनमेंट के लिए जाता है । उन दोनों के बीच कोई तकनीकी अंतर नहीं है। शायद.onload = एक बेहतर क्रॉस-ब्राउज़र उपलब्ध है।

हालाँकि, आप load eventएक <div>या एक <span>तत्व या whatnot को असाइन नहीं कर सकते ।

Answer 6

सारांश:

1. addEventListenerकई ईवेंट जोड़ सकते हैं, जबकि इसके साथ onclickऐसा नहीं किया जा सकता है।
2. onclickएक HTMLविशेषता के रूप में जोड़ा जा सकता है , जबकि addEventListenerकेवल <script>तत्वों में जोड़ा जा सकता है ।
3. addEventListener एक तीसरा तर्क ले सकता है जो घटना के प्रसार को रोक सकता है।

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

Comments

और आप का तत्व लक्ष्यीकरण कैसे किया जाता है? मेरा मतलब है, मैं व्यक्तिगत रूप onclickसे कमरे में हंसी होने के डर से इनलाइन हैंडलर का उपयोग नहीं करने वाला हूं - लेकिन हाल के वर्षों में आमतौर पर घटनाएं बहुत खराब और कम मुख्य तरीकों से बंधी हैं। वर्गों की तरह js-link, js-form-validationया डेटा विशेषताओं के साथ data-jspackage="init"किसी भी बेहतर कोई रास्ता नहीं में है ... और कैसे ofteen आप वास्तव में है का उपयोग घटना उत्साह से भरा हुआ? मुझे व्यक्तिगत रूप से जांच के बिना एक हैंडलर लिखने में सक्षम होना पसंद होगा यदि लक्ष्य वास्तव में मेरे तत्व से मेल खाता है - या यादृच्छिक बग के कारण कई स्थानों पर प्रसार को रोकना है।

— क्रिस्टोफर बुबाक

Answer 7

एक विस्तार अभी तक ध्यान दिया नहीं किया गया है: आधुनिक डेस्कटॉप ब्राउज़र के लिए "क्लिक" होने के लिए अलग बटन प्रेस करने पर विचार AddEventListener('click'और onclickडिफ़ॉल्ट रूप से।

• Chrome 42 और IE11 पर, दोनों onclickऔर AddEventListenerबाईं और मध्य क्लिक पर आग क्लिक करें।
• फ़ायरफ़ॉक्स 38 पर, केवल बाएं क्लिक पर onclickफायर होता है , लेकिन AddEventListenerबाईं, मध्य और दाईं क्लिक पर आग पर क्लिक करें।

इसके अलावा, मध्य-क्लिक व्यवहार ब्राउज़र में बहुत असंगत होता है जब स्क्रॉल कर्सर शामिल होते हैं:

• फ़ायरफ़ॉक्स पर, मध्य-क्लिक की घटनाओं में हमेशा आग लगती है।
• क्रोम पर, अगर मिडकॉल एक स्क्रॉल कर्सर को खोलता है या बंद करता है, तो वे फायर नहीं करेंगे।
• IE पर, वे स्क्रॉल करते हैं जब स्क्रॉल कर्सर बंद हो जाता है, लेकिन जब यह खुलता है तो नहीं।

यह भी ध्यान देने योग्य है कि किसी भी कीबोर्ड-चयन योग्य HTML तत्व के लिए "क्लिक करें" घटनाएं जैसे कि inputअंतरिक्ष में आग लगाना या तत्व का चयन करने पर प्रवेश करना।

Answer 8

जावास्क्रिप्ट वस्तुओं में सब कुछ मिश्रण करने के लिए जाता है और यह भ्रमित कर सकता है। सभी एक में जावास्क्रिप्ट तरीका है।

अनिवार्य रूप से onclick एक HTML विशेषता है। इसके विपरीत addEventListener एक HTML तत्व का प्रतिनिधित्व डोम ऑब्जेक्ट पर एक विधि है।

जावास्क्रिप्ट ऑब्जेक्ट्स में, एक विधि केवल एक संपत्ति है जिसका एक मूल्य के रूप में एक फ़ंक्शन होता है और यह उस ऑब्जेक्ट के खिलाफ काम करता है जो इसे संलग्न है (उदाहरण के लिए इसका उपयोग करके)।

जावास्क्रिप्ट में DOM द्वारा दर्शाया गया HTML तत्व इसके गुणों पर मैप किया गया गुण होगा।

यह वह जगह है जहां लोग भ्रमित हो जाते हैं क्योंकि जावास्क्रिप्ट अप्रत्यक्ष की परत के साथ एक कंटेनर या नाम स्थान में सब कुछ पिघला देता है।

एक सामान्य OO लेआउट में (जो संपत्तियों / विधियों के नाम स्थान को कम से कम विलय करता है) आपके पास कुछ इस तरह हो सकता है:

domElement.addEventListener // Object(Method)
domElement.attributes.onload // Object(Property(Object(Property(String))))

इसमें विविधताएं हैं जैसे यह विशेषताओं के लिए ऑनलोड या हैशपॉप के लिए एक गेट्टर / सेटर का उपयोग कर सकता है लेकिन आखिरकार यह कैसा है। जावास्क्रिप्ट ने उस चीज की अप्रत्यक्षता को खत्म कर दिया, जो यह जानने की उम्मीद में कि अन्य चीजों में क्या है। इसने वर्चस्व और विशेषताओं को एक साथ मिला दिया।

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

आज यह हावी क्यों है? यह लिखने में तेज है, सीखने में आसान है और सिर्फ काम करने के लिए है।

HTML में ऑनलोड का पूरा बिंदु पहली जगह में AddEventListener विधि या कार्यक्षमता को एक्सेस देना है। जेएस में इसका उपयोग करके आप HTML के माध्यम से जा रहे हैं जब आप इसे सीधे लागू कर सकते हैं।

Hypothetically आप अपनी विशेषताएं बना सकते हैं:

$('[myclick]').each(function(i, v) {
     v.addEventListener('click', function() {
         eval(v.myclick); // eval($(v).attr('myclick'));
     });
});

जेएस जो करता है वह उससे थोड़ा अलग है।

आप इसे कुछ इस तरह से बराबरी कर सकते हैं (बनाए गए हर तत्व के लिए):

element.addEventListener('click', function() {
    switch(typeof element.onclick) {
          case 'string':eval(element.onclick);break;
          case 'function':element.onclick();break;
     }
});

वास्तविक कार्यान्वयन विवरण संभवत: कुछ मामलों में दो अलग-अलग बनाने वाले सूक्ष्म रूपांतरों की एक श्रृंखला के साथ भिन्न होंगे, लेकिन यह इसका सार है।

यकीनन यह एक संगतता हैक है जिसे आप फ़ंक्शन को किसी विशेषता पर पिन कर सकते हैं क्योंकि डिफ़ॉल्ट विशेषताएँ सभी तार हैं।

Answer 9

एमडीएन के अनुसार , अंतर निम्नानुसार है:

addEventListener:

EventTarget.addEventListener () विधि ईवेंटटेरगेट पर निर्दिष्ट ईवेंट प्रकार के लिए इवेंट श्रोताओं की सूची में निर्दिष्ट EventListener- संगत ऑब्जेक्ट जोड़ता है, जिस पर इसे कहा जाता है। घटना का लक्ष्य एक दस्तावेज़ में एक तत्व, दस्तावेज़ स्वयं, एक विंडो, या किसी अन्य वस्तु जो घटनाओं का समर्थन करती है (जैसे XMLHttpRequest) हो सकती है।

क्लिक पर:

ऑनक्लिक संपत्ति वर्तमान तत्व पर क्लिक इवेंट हैंडलर कोड लौटाती है। किसी क्रिया को ट्रिगर करने के लिए क्लिक इवेंट का उपयोग करते समय, कीडाउन इवेंट में भी इसी क्रिया को जोड़ने पर विचार करें, ताकि माउस या टच स्क्रीन का उपयोग न करने वाले लोगों द्वारा उसी कार्रवाई का उपयोग किया जा सके। सिंटैक्स एलिमेंट।ऑनक्लिक = फंक्शनरीफ; जहां functionRef एक फ़ंक्शन है - अक्सर किसी फ़ंक्शन का नाम कहीं और घोषित किया जाता है या फ़ंक्शन अभिव्यक्ति। विवरण के लिए "जावास्क्रिप्ट गाइड: कार्य" देखें।

जैसा कि आप नीचे दिए गए कोड में देखते हैं, उपयोग में एक सिंटैक्स अंतर भी है:

addEventListener:

// Function to change the content of t2
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

क्लिक पर:

function initElement() {
    var p = document.getElementById("foo");
    // NOTE: showAlert(); or showAlert(param); will NOT work here.
    // Must be a reference to a function name, not a function call.
    p.onclick = showAlert;
};

function showAlert(event) {
    alert("onclick Event detected!");
}

Answer 10

यदि आप ब्राउज़र समर्थन के बारे में चिंतित नहीं हैं, तो ईवेंट द्वारा बुलाए गए फ़ंक्शन में 'इस' संदर्भ को रिबंड करने का एक तरीका है। यह आम तौर पर उस तत्व को इंगित करेगा जो फ़ंक्शन निष्पादित होने पर घटना उत्पन्न करता है, जो हमेशा वह नहीं होता है जो आप चाहते हैं। मुश्किल हिस्सा एक ही समय में एक ही घटना श्रोता को दूर करने में सक्षम है, जैसा कि इस उदाहरण में दिखाया गया है: http://jsfiddle.net/roenbaeck/vBYu3/

/*
    Testing that the function returned from bind is rereferenceable, 
    such that it can be added and removed as an event listener.
*/
function MyImportantCalloutToYou(message, otherMessage) {
    // the following is necessary as calling bind again does 
    // not return the same function, so instead we replace the 
    // original function with the one bound to this instance
    this.swap = this.swap.bind(this); 
    this.element = document.createElement('div');
    this.element.addEventListener('click', this.swap, false);
    document.body.appendChild(this.element);
}
MyImportantCalloutToYou.prototype = {
    element: null,
    swap: function() {
        // now this function can be properly removed 
        this.element.removeEventListener('click', this.swap, false);           
    }
}

ऊपर दिया गया कोड Chrome में अच्छी तरह से काम करता है, और संभवत: अन्य ब्राउज़रों के साथ "बाइंड" करने के लिए कुछ शिम है।

Answer 11

इनलाइन हैंडलर का उपयोग करना सामग्री सुरक्षा नीति के साथ असंगत है इसलिए addEventListenerदृष्टिकोण उस दृष्टिकोण से अधिक सुरक्षित है। बेशक, आप इनलाइन हैंडलर्स को सक्षम कर सकते हैं unsafe-inline, लेकिन जैसा कि नाम से पता चलता है, यह सुरक्षित नहीं है क्योंकि यह जावास्क्रिप्ट शोषण के पूरे गिरोह को वापस लाता है जो सीएसपी रोकता है।

Comments

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

— क्रिस बेकर

Answer 12

यह संभव हो सकता है कि या तो इसे प्रोटोटाइप करके श्रोता का विस्तार किया जाए (यदि हमारे पास इसका संदर्भ है और इसका कोई अनाम कार्य नहीं है) -या तो 'ऑनक्लिक' कॉल को फंक्शन लाइब्रेरी (कॉल फंक्शन अ फंक्शन कॉलिंग फंक्शन)

पसंद

    elm.onclick = myFunctionList
    function myFunctionList(){
      myFunc1();
      myFunc2();
    }

इसका मतलब यह है कि हमें कभी भी ऑनक्लिक कॉल को चेंज नहीं करना पड़ता है, केवल फंक्शन myFunctionList () को बदलने के लिए जो कभी भी हम चाहते हैं, लेकिन यह हमें बुदबुदाती / पकड़ने के चरणों के नियंत्रण के बिना छोड़ देता है ताकि नए ब्राउज़रों से बचा जाए।

बस किसी को भविष्य में यह धागा मिल जाए तो ...

Answer 13

element.onclick = function () {/ * do stuff * /}

element.addEventListener ('क्लिक', फंक्शन () {/ * do stuff * /}, false);

वे स्पष्ट रूप से एक ही काम करते हैं: क्लिक इवेंट के लिए सुनो और कॉलबैक फ़ंक्शन निष्पादित करें। फिर भी, वे बराबर नहीं हैं। यदि आपको कभी दोनों के बीच चयन करने की आवश्यकता होती है, तो इससे आपको यह पता लगाने में मदद मिल सकती है कि आपके लिए कौन सा सबसे अच्छा है।

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

इसे आज़माएं: https://jsfiddle.net/fjets5z4/5/

पहले स्थान पर मुझे ऑन्कलिक का उपयोग करने के लिए लुभाया गया था, क्योंकि यह छोटा है और सरल दिखता है ... और वास्तव में यह है। लेकिन मैं इसे अब और इस्तेमाल करने की सलाह नहीं देता। यह इनलाइन जावास्क्रिप्ट का उपयोग करने जैसा है। कुछ का उपयोग करना - जैसे कि इनलाइन जावास्क्रिप्ट - आजकल अत्यधिक हतोत्साहित है (इनलाइन सीएसएस को भी हतोत्साहित किया जाता है, लेकिन यह एक और विषय है)।

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

var clickEvent = document.getElementByID("onclick-eg");
var EventListener = document.getElementByID("addEventListener-eg");

clickEvent.onclick = function(){
    window.alert("1 is not called")
}
clickEvent.onclick = function(){
    window.alert("2 is not called")
}

EventListener.addEventListener("click",function(){
    window.alert("1 is called")
})
EventListener.addEventListener("click",function(){
    window.alert("2 is also called")
})

Answer 14

addEventListener आपको कई हैंडलर सेट करने देता है, लेकिन IE8 या उससे कम में समर्थित नहीं है।

IE है attachEvent, लेकिन यह बिल्कुल वैसा ही नहीं है।

Answer 15

'this'JavasSript में कीवर्ड द्वारा संदर्भित संदर्भ अलग है।

निम्नलिखित कोड देखें:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

</head>
<body>
    <input id="btnSubmit" type="button" value="Submit" />
    <script>
        function disable() {
            this.disabled = true;
        }
        var btnSubmit = document.getElementById('btnSubmit');
        btnSubmit.onclick = disable();
        //btnSubmit.addEventListener('click', disable, false);
    </script>
</body>
</html>

यह क्या करता है वास्तव में सरल है। जब आप बटन पर क्लिक करते हैं, तो बटन स्वचालित रूप से अक्षम हो जाएगा।

पहले जब आप इस तरह से घटनाओं को हुक करने की कोशिश करते हैं तो button.onclick = function(), बटन पर क्लिक करके ऑनक्लिक ईवेंट चालू हो जाएगा, हालाँकि, बटन अक्षम नहीं होगा क्योंकि बटन.ऑनक्लिक और ऑनक्लिक इवेंट हैंडलर के बीच कोई स्पष्ट बंधन नहीं है। यदि आप 'this'ऑब्जेक्ट को डीबग करते हैं , तो आप देख सकते हैं कि यह 'window'ऑब्जेक्ट को संदर्भित करता है ।

दूसरी बात, यदि आप टिप्पणी करते हैं btnSubmit.onclick = disable();और असहज होते //btnSubmit.addEventListener('click', disable, false);हैं , तो आप देख सकते हैं कि बटन अक्षम है क्योंकि इस तरह से बटन के बीच स्पष्ट बंधन है। घटना पर क्लिक करें और घटना के हैंडलर पर क्लिक करें। यदि आप अक्षम फ़ंक्शन में डिबग करते हैं, तो आप 'this'इसके button controlबजाय को संदर्भित कर सकते हैं window।

यह कुछ ऐसा है जो मुझे जावास्क्रिप्ट के बारे में पसंद नहीं है जो असंगतता है। Btw, यदि आप jQuery ( $('#btnSubmit').on('click', disable);) का उपयोग कर रहे हैं, तो यह स्पष्ट बाध्यकारी का उपयोग करता है।

Comments

आपको लिखने की ज़रूरत है btnSubmit.onclick = disable;(फ़ंक्शन असाइन करें, इसे कॉल न करें)। फिर दोनों मामलों thisमें बटन तत्व को संदर्भित करेगा।

— पाशा

Answer 16

onclick मूल रूप से एक addEventListener है जो विशेष रूप से एक फ़ंक्शन करता है जब तत्व पर क्लिक किया जाता है। इसलिए, उपयोगी जब आपके पास एक बटन होता है जो कैलकुलेटर बटन की तरह सरल ऑपरेशन करता है। addEventlistener का उपयोग कई चीजों के लिए किया जा सकता है जैसे कि एक ऑपरेशन करते समय DOM या सभी सामग्री लोड होने पर, window.onload के समान लेकिन अधिक नियंत्रण के साथ।

ध्यान दें, आप वास्तव में इनलाइन के साथ एक से अधिक घटनाओं का उपयोग कर सकते हैं, या कम से कम प्रत्येक फ़ंक्शन को अर्ध-बृहदान्त्र के साथ अलग करके उपयोग कर सकते हैं, जैसे ...।

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

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