कन्स्ट्रक्टर में ईवेंट श्रोताओं को जोड़ना

Question

function Foo(elementId, buttonId) { 
this.element = document.getElementById(elementId); 
this.button = document.getElementById(buttonId); 
this.bar = function() {dosomething}; 
this.button.addEventListener('click', function(e) {this.bar();}, false); 
} 

var myFoo = new Foo('someElement', 'someButton'); 

मैं अपने कन्स्ट्रक्टर के अंदर ईवेंट श्रोताओं को जोड़ना चाहता हूं, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा है। क्या यह कुछ सही वाक्यविन्यास के साथ संभव है? मैं हमेशा लाइन पर लटका दिया हो:

this.button.addEventListener('click', function(e) {this.bar();}, false); 

Answer 1

आपका this मूल्य परिवर्तन की तरह एक चर का उपयोग करें। आप चयनकर्ता में एक संदर्भ रख सकते हैं, और संदर्भ का उपयोग कर सकते हैं।

function Foo(elementId, buttonId) { 

    /*...*/ 

    var self = this; 
    this.button.addEventListener('click', function(e) {self.bar();}, false); 
} 

---

या एक और अधिक आधुनिक समाधान की आवश्यकता नहीं है कि एक चर Function.prototype.bind उपयोग करने के लिए किया जाएगा।

function Foo(elementId, buttonId) { 

    /*...*/ 

    this.button.addEventListener('click', this.bar.bind(this), false); 
} 

.bind विधि जो भी आप इसे पारित करने के लिए बाध्य this मूल्य के साथ एक नया bar फ़ंक्शन। इस मामले में, यह कन्स्ट्रक्टर से मूल this तक बाध्य है।

Answer 2

ईवेंट हैंडलर में this तत्व है कि इस घटना के लिए जोड़ा गया है।

बाहरी this तक पहुंचने के लिए, आपको इसे एक अलग चर में स्टोर करने की आवश्यकता है।

Answer 3

क्लिक हैंडलर में this बटन तत्व नहीं वस्तु है, वस्तु के संदर्भ के लिए, निर्माता में var self = this;

function Foo(elementId, buttonId) { 
    var self = this; 
    this.element = document.getElementById(elementId); 
    this.button = document.getElementById(buttonId); 
    this.bar = function() {dosomething}; 
    this.button.addEventListener('click', function(e) {self.bar();}, false); 
}