如何刪除javascript中的事件偵聽器？

Question

我想知道如何在添加事件偵聽器后刪除事件偵聽器，您在 jquery 中使用和關閉的方式？

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

但這實際上並沒有刪除事件偵聽器。 如果我將 addEventListener 代碼放在一個函數中並將該函數傳遞給 removeEventListener 它將不起作用 bc 你不能將參數傳遞給函數。 有人知道怎么做嗎？

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 ，因此可能仍會發生變化。

Answer 2

我認為這樣做的一個好方法是自己添加一個事件然后調用

event.stopImmediatePropagation()

例如：

htmlElement.addEventListener('touchstart', (event) => event.stopImmediatePropagation());

在 Chrome 中有一些功能，例如

htmlElement.removeAllListeners()

這可能會真正刪除監聽器。 但我認為這不是一個明智的解決方案，因為其他瀏覽器似乎並沒有很好地支持它。