如何删除 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.off('scroll') 之类的操作。如果您使用 Javascript 添加处理程序，jQuery 的 off 将无法使用。

Answer 2

您可以使用 on 在 jQuery 中添加事件处理程序，并使用 off 将其删除。 Here's a fiddle 来说明一下。

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

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

如何删除 Javascript 中的事件侦听器？

How to remove Event Listener in Javascript?

javascript

jquery

json

scroll

event-listener