javascript - 如何删除 javascript 中的事件监听器？

Question

我想知道如何在添加一个事件监听器后删除它，就像您在 jquery 中使用 on 和 off 的方式一样？

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

但这实际上并没有删除事件监听器。如果我将 addEventListener 代码放在一个函数中并将该函数传递给 removeEventListener 它将不起作用，因为您不能将参数传递给该函数。有人知道怎么做吗？

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 是一个 Object，它将是 ByRef，因此可能仍会发生变化。