Onclick बनाम addEventListener

Question

Possible Duplicate:
addeventhandler vs onclick

मैं HTML तत्वों की एक संपत्ति के रूप में उपयोग करते हुए "onclick" "onmousedown" द्वारा भ्रमित कर रहा हूँ।

जैसे:

<button onclick="my_JS_function()"></button> 

या

<div onmousedown="my_another_JS_funciton"></div> 

लेकिन कुछ लोगों को बताते हैं कि केवल "उचित" "श्रोताओं" जोड़ने का तरीका क्या अधिक है द्वारा

document.getElementById("my_id").addEventListener("onclick", my_JS_function, false); 

हैं ऐसा करने का "उचित" अधिक समर्थित तरीका?

Answer 1

उत्तरार्द्ध (addEventListener()) सबसे अच्छा तरीका है, क्योंकि आप एक ही प्रकार के एक ही तत्व को एक ही तत्व में संलग्न कर सकते हैं।

onclick, आदि को असाइन करके, आप मौजूदा हैंडलर को ओवरराइट कर देंगे।

Answer 2

अगर आप पहले से समारोह को जानते हैं और तत्व एचटीएमएल यानी इसके अच्छे से गतिशील रूप से जोड़ा नहीं हो कि तुम समारोह इनलाइन जोड़ने के बजाय "addEventListener" की तरह अतिरिक्त विधि कॉल का उपयोग कर का हिस्सा है

एक और बात नोट करने के लिए

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

ऑनक्लिकडोम स्तर 0 संपत्ति है। AddEventListenerDOM स्तर 2 परिभाषा का हिस्सा है। इस बारे में पढ़ें:

<a href="gothere.htm" onlick="alert('Bye!')">Click me!</a> 

ऊपर तकनीक सरल हैं, लेकिन है कुछ नुकसान: वे आप प्रति सिर्फ एक ईवेंट हैंडलर की अनुमति एचटीएमएल टैग विशेषताओं, उदाहरण के लिए के रूप में http://www.w3.org/TR/DOM-Level-2-Events/events.html

इनलाइन ईवेंट हैंडलर्स जोड़ा तत्व। इसके अलावा, इनलाइन ईवेंट हैंडलर के साथ आपको HTML मार्कअप से जावास्क्रिप्ट कोड का बहुत खराब अलगाव मिलता है।

document.getElementById("my_id").addEventListener("onclick", my_JS_function, false); 

इस की Advatange: आप एक से अधिक ईवेंट हैंडलर जोड़ सकते हैं। भी separte और JavaScript कोड

अधिक विस्तार के लिए आप इस पढ़ सकते हैं: Adding an Event Handler