主页 / 问题 / 726332
Accepted
smellyshovel
Asked:2020-10-04 02:32:32 +0800 CST2020-10-04 02:32:32 +0800 CST

事件触发后如何删除事件处理程序？

  • 772

我在MDN上阅读了以下内容：

如果在被删除的事件正在运行时调用它，则不会从 EventTarget 中删除 EventListener。

问题很明显：我不知道事件何时会发生。但是，尽管如此，当它发生时，我需要以某种方式删除处理程序。

所以这样的事情是行不通的：

var func = function(event) {
    // ...
    el.removeEventListener("event", func);
};

el.addEventListener("event", func);

如果你这样做：

el.addEventListener("event", func);
el.removeEventListener("event", func);

那么，显然，处理程序将在挂起后立即被删除。因此，该事件将无法捕获。

实际上，“解决方法”的兴趣。有一个想法是实现一些“后过滤器”，每次回调执行后都会执行，但是这个“后过滤器”本身将成为同一个回调的一部分，这意味着处理程序不会被删除.

关于独立搜索解决方案。搜索。偶然发现了这个答案。为什么它应该起作用 - 我不明白，因为它与 MDN 的话相矛盾。这里的情况类似。

javascript

2 个回答

  1. 我想你不太明白写的是什么。处理程序在事件执行期间不会被删除 - 它是......但是当您在事件处理程序中删除它时，事件已经发生，因此删除应该没有问题。

    • 1
  2. Best Answer

    由于对该问题的视图数量增加，我在代码示例中添加了我的答案。

    事实上，一切都很好。只是英文原文在 MDN 上没有正确翻译。

    function handleClick(event) {
    console.log("Событие обработано");
    target.removeEventListener("click", handleClick);
};

let target = document.querySelector("#target");
target.addEventListener("click", handleClick);
    #target {
  width: 100px;
  height: 100px;
  background-color: red;
}
    <div id="target">Нажми на меня</div>

    此外，您还可以通过传递addEventListener包含once: true.

    function handleClick(event) {
    console.log("Событие обработано");
    // target.removeEventListener("click", handleClick); // Явно удалять обработчик больше нет необходимости
};

let target = document.querySelector("#target");
target.addEventListener("click", handleClick, {once: true}); // Обратите внимание на {once: true}
    #target {
  width: 100px;
  height: 100px;
  background-color: red;
}
    <div id="target">Нажми на меня</div>

    • 0

相关问题