2012-10-04 108 views
6
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'); 

Me gustaría agregar detectores de eventos dentro de mi constructor, pero parece que no funciona. ¿Es esto posible con la sintaxis correcta? Siempre se colgó en la línea:Añadiendo Event Listeners en el constructor

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

Respuesta

5

Sus this valor cambia en el constructor. Puede mantener una referencia en el selector y usar la referencia.

function Foo(elementId, buttonId) { 

    /*...*/ 

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

o una solución más moderna que no requiere una variable sería utilizar Function.prototype.bind.

function Foo(elementId, buttonId) { 

    /*...*/ 

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

El método .bind devuelve una nueva función bar con el valor this ligado a lo que pasaste. En este caso, está vinculado al original this del constructor.

+1

Es importante tener en cuenta que muchos navegadores aún de uso común (por ejemplo, IE 8, Safari <= 5.1, otros) no son compatibles con Function.prototype.bind: http://kangax.github.com/es5-compat-table/ – zachelrath

+0

var self = esto; Eso lo hizo; Ni siquiera pensé que 'esto' podría estar haciendo referencia al elemento del botón. Gracias por su ayuda y la respuesta rápida. Yo hubiera votado si pudiera, pero todavía no tengo el representante :) –

+1

@Llepwryd: Me alegro de poder ayudar. –

1

this en el controlador de eventos es el elemento que el evento ha sido añadido a.

Para acceder al exterior this, necesita almacenarlo en una variable separada.

0

this en el controlador de clic es el elemento de botón no el objeto, utilice una variable para hacer referencia al objeto, como 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); 
}