Hinzufügen von Ereignis-Listenern im Konstruktor

Question

Ich möchte Ereignis-Listener in meinem Konstruktor hinzufügen, aber es scheint nicht zu funktionieren. Ist das mit der richtigen Syntax möglich? Ich bekomme immer auf der Linie aufgehängt:

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

Answer 1

Ihre this Wertänderungen im Konstruktor. Sie können eine Referenz im Selektor beibehalten und die Referenz verwenden.

function Foo(elementId, buttonId) { 

    /*...*/ 

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

---

Oder eine modernere Lösung, die keine Variable Function.prototype.bind wäre die Verwendung erfordert.

function Foo(elementId, buttonId) { 

    /*...*/ 

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

Die .bind Methode gibt eine neue bar Funktion mit dem Wert this gebunden, was auch immer Sie es übergeben. In diesem Fall ist es vom Konstruktor an das Original this gebunden.

Answer 2

this im Ereignishandler ist das Element, dass das Ereignis hinzugefügt wurde.

Um auf die äußere this zuzugreifen, müssen Sie sie in einer separaten Variablen speichern.

Answer 3

this in dem Klick-Handler die Schaltfläche Element ist nicht das Objekt, verwenden Sie eine Variable, das Objekt zu verweisen, wie 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); 
}