Dodawanie odbiorców zdarzeń w konstruktorze

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'); 

Chciałbym dodać detektory zdarzeń wewnątrz mojego konstruktora, ale to nie działa. Czy jest to możliwe dzięki poprawnej składni? Zawsze się powiesił na linii:

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

Answer 1

Twoje this zmian wartości w konstruktorze. Możesz zachować referencję w selektorze i użyć referencji.

function Foo(elementId, buttonId) { 

    /*...*/ 

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

---

lub bardziej nowoczesne rozwiązanie, które nie wymaga zmienna byłoby użyć Function.prototype.bind.

function Foo(elementId, buttonId) { 

    /*...*/ 

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

.bind Metoda zwraca nowy bar funkcji z wartością this związany cokolwiek go minęła. W tym przypadku jest on powiązany z oryginałem this od konstruktora.

Answer 2

this w obsługi zdarzeń jest elementem, że zdarzenie zostało dodane do.

Aby uzyskać dostęp do zewnętrznego this, należy zapisać go w oddzielnej zmiennej.

Answer 3

this w obsługi click nie jest elementem przycisk przedmiot, należy użyć zmiennej odniesienia do obiektu, jak 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); 
}