Duda con EventListeners

[MGGMX]

Buenas tardes, y gracias por pasarse por aquí.

Resulta que estoy aprendiendo JavaScript (para aprender Angular y Node). Estoy viendo el tema de los Event Listeners de JavaScript y me surgió un problema con un ejercicio.

Dado un HTML sencillo que consta de dos elementos: <p> y <button>, quiero realizar lo siguiente:

1.- Agregar un EventListener de tipo 'click' al button para que pueda remover el párrafo.
2.- Luego de remover el párrafo, eliminar dicho EventListener y asignarle otro para que pueda 'restaurar' el párrafo (lo hago con la propiedad css display).
3.- Luego de restuarar el párrafo, eliminar dicho eventListener y asignarle el EventListener para remover el párrafo.

1.- Button -> addEventListener ('click', remover, false);
[Párrafo removido]
2.- Button -> RemoveEventListener('click', remover, false);
Button -> addEventListener('click', restaurar, false);
[Párrafo restaurado]
3.- Button -> removeEventListener('click', restaurar, false);
Button -> addEventListener('click', remover, false);


Les dejo el ejemplo en JSFiddle: http://jsfiddle.net/n22c162t

[iframe width="100%" height="600" src="http://jsfiddle.net/n22c162t/embedded/" allowfullscreen="allowfullscreen" frameborder="0"][/iframe]

Gracias.

[Alexis88]

El problema ocurre porque dentro de cada método, invocas al otro utilizando la palabra reservada this cuando en ese ámbito este ya cambió pues al ser desencadenado por el evento click en el botón, este sería el nuevo this. Una alternativa de solución consiste en que crees una copia de la clase en una variable e invoques a sus métodos tomándola como punto de apoyo.

Código Javascript:

var Pagina = function () {
    var parrafo = document.getElementById("publicacion-texto"),
        boton = document.getElementById("btn-remover"),
        self = this;
    
    this.restaurar = function () {
        parrafo.style.display = 'block';
        boton.removeEventListener('click', self.restaurar, false);
        boton.addEventListener('click', self.remover, false);
        boton.innerHTML = 'Haz click aquí para remover el texto';
    };
    
    this.remover = function () {
        parrafo.style.display = 'none';
        boton.removeEventListener('click', self.remover, false);
        boton.addEventListener('click', self.restaurar, false);
        boton.innerHTML = 'Haz click aquí para restaurar el texto';
    };
    
    this.agregarEventoBtn = function () {
        boton.addEventListener('click', self.remover, false);
    };
};
 

Saludos