如何在Javascript中刪除事件監聽器？

Question

我正在嘗試在腳本中實現延遲滾動，並且一直運行到結束為止，而且我想阻止它發出額外的請求。

我已經使用以下命令將事件監聽器添加到了代碼中：

window.addEventListener("scroll", _.throttle(checkScroll, 500));

但是，當我嘗試將其刪除時，它似乎仍在繼續監聽並處理該事件。

我試過了：

if (json.articles.length == 0) {
                $(".articles").append("<br>That's all folks!");
                window.removeEventListener("scroll", _.throttle(checkScroll, 500));
}

和

if (json.articles.length == 0) {
                $(".articles").append("<br>That's all folks!");
                window.off("scroll");
}

但似乎都沒有用。

Answer 1

如果使用純Javascript添加事件監聽器，則刪除它的唯一方法是保存對傳遞給addEventListener _.throttle調用結果的引用：

const handler = _.throttle(checkScroll, 500);
window.addEventListener("scroll", handler);
// ...
window.removeEventListener("scroll", handler);

如果您還使用jQuery添加處理程序（例如$(window).on(...)然后是$(window).off(...) $(window).on(...) ，則只能執行window.off('scroll') ）之類的操作。 如果使用Javascript添加處理程序，則jQuery的off將無法使用。

Answer 2

您可以使用on在jQuery中添加事件處理程序，並使用off將其刪除。 這是一個小提琴來說明它。

$(window).on('scroll', function(ev) { //add handler
    ...
})

$(window).off('scroll', function(ev) { //remove handler
    ...
})