如何在JavaScript中移除事件监听器？

Question

我想知道如何在添加事件监听器后将其移除，就像在jQuery中使用on和off一样?

document.removeEventListener('touchstart');
document.addEventListener('touchstart', function (e) {
     closePopupOnClick(e, popup);
});

但是这并没有真正删除事件监听器。如果我将addEventListener代码放在函数中，并将该函数传递到removeEventListener中，它将无法工作，因为您无法将参数传递到该函数中。有人知道如何解决这个问题吗？

- FairyQueen

---

可能是JavaScript：删除事件侦听器的重复问题，还有Javascript：移除匿名事件侦听器。 - Ohgodwhy

不，那个问题没有解决参数的问题。 - FairyQueen

Answer 1

将监听器作为变量，并通过.addEventListener进行附加。

var myListener = function (e) {
    closePopupOnClick(e, popup);
};
document.addEventListener('touchstart', myListener, true);

然后在使用 .removeEventListener 移除时再次传递它。

document.removeEventListener('touchstart', myListener);

---

如果您没有使用严格模式，可以使用arguments.callee使侦听器自我删除。

document.addEventListener('touchstart', function (e) {
    closePopupOnClick(e, popup);
    document.removeEventListener('touchstart', arguments.callee);
}, true);

如果您使用严格模式，想要让函数自我移除，必须使用命名函数表达式

document.addEventListener('touchstart', function myListener(e) {
    closePopupOnClick(e, popup);
    document.removeEventListener('touchstart', myListener);
}, true);

---

如果您想在监听器中使用可能会被某些东西（例如循环）更改的变量，则可以编写生成器函数，例如。

function listenerGenerator(popup) {
    return function (e) {
        closePopupOnClick(e, popup);
    };
}

现在可以使用listenerGenerator(popup)创建监听器，它将作用于popup变量。请注意，如果popup是一个对象，它将是按引用传递的，因此仍可能会受到更改的影响。

- Paul S.

---

如何将 e 和 popup 参数传递给 addEventListener 中的 myListener 函数？这是我最困惑的地方。参数是什么。 - FairyQueen

e 和 popup 是从哪里来的？e 是 Event 吗？那么你需要将 useCapture 设置为 true。 - Paul S.

addEventListener函数位于一个接收弹出参数的函数内部。因此它来自外部函数。e是事件。我如何设置userCapture？ - FairyQueen

@Tanya useCapture 是 addEventListener 的第三个参数；其他参数包括 type_、_listener 和（可选的）_useCapture_（默认为 false）。请阅读我回答中的链接以获取更多详细信息。 - Paul S.

removeEventListener似乎需要与addEventListener使用相同的useCapture值才能正常工作：document.removeEventListener('touchstart', arguments.callee, true); - user1566694