javascript - 对事件监听器感到困惑

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.

我可以将事件监听器分配给按钮，但无法将其删除。一旦按钮具有删除事件，该事件就永远不会被删除，也永远不会添加新事件。为什么会出现这种情况？如果我错了，请告诉我更好的代码实践。

这是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 按钮元素。

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

此外，您还有一个拼写错误:AddEventListener 应该是 addEventListener。

检查这个fixed JSFiddle 。另外，this SO question提供了许多有关此的重要信息。