Question

我最近在学习JavaScript而且还不了解一些东西。在这个例子中，我想要一个带有两个事件监听器的按钮，但不能同时执行。就是这样：

网页有两个元素：一个段落（<p>）和一个按钮。此按钮应移除<p>元素，并在交替点击时恢复该元素。

1.- Add an event listener to the button (remove).
    |--- Remove the <p> element.
    |--- Remove the <p> element
    |--- Remove the listener and add a new event listener (restore).

2.- With the new event listener (restore), the button restore the <p> element.
    |--- Remove the event listener (restore)
    |--- Add a new event listener (remove);

3.- Back to 1.

我可以将事件监听器分配给按钮，但我无法将其删除。按钮具有remove事件后，将永远不会删除此事件，并且永远不会添加新事件。为什么会这样？如果我错了，请告诉我更好的代码实践。

以下是jsfiddle中的代码：http://goo.gl/4CX55g

非常感谢。

Answer 1

以下几行不符合您的预期：

boton.removeEventListener('click', this.remover, false);
boton.addEventListener('click', this.restaurar, false);
boton.removeEventListener('click', this.restaurar, false);
boton.AddEventListener('click', this.remover, false);

此处的this变量不指向定义函数的Pagina对象。它指向调用remover或restaurar函数的对象。您可以通过添加alert(this);电话进行检查。此示例中的对象是HTML按钮元素。

您可以通过在that = this;的分配下创建一个新变量boton来解决此问题。然后，在方法中使用that而不是this。

另外，您输错了：AddEventListener应为addEventListener。

检查fixed JSFiddle。另外，this SO question提供了很多有关this的详细信息。

Answer 2

问题在于您的功能范围。您需要在每个函数调用之外设置对this的引用。

这对我有用： http://jsfiddle.net/n22c162t/2/

Answer 3

但是如果你想要隐藏和展示一个段落，你就可以走很远的路了......

<script>
    document.getElementById("btn-remover").onclick=function(){
    var el = document.getElementById("publicacion-texto");
    if(el.style.display=="none"){
    el.style.display="block";
    this.innerHTML="Haz click aquí para remover el texto";
    } else {
    el.style.display="none";
    this.innerHTML="Haz click aquí para restaurar el texto";
        }
    }
</script>

对事件监听器感到困惑

3 个答案: