Javascript removeEventListener 不工作

Question

我有以下代码来添加 eventListener

 area.addEventListener('click',function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          },true);

它按预期正常工作。稍后在另一个函数中，我尝试使用以下代码删除事件侦听器

 area.removeEventListener('click',function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          },true);

但是 even listener 并没有被移除..为什么会这样？我的 removeEventListener() 有什么问题吗？ 注意：这里的区域类似于 document.getElementById('myId')

Answer 1

这是因为这两个匿名函数是完全不同的函数。 removeEventListener 的参数不是对先前附加的函数对象的引用。

function foo(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          }
 area.addEventListener('click',foo,true);
 area.removeEventListener('click',foo,true);

Answer 2

我发现对于 windows 对象，最后一个参数“true”是必需的。 如果没有捕获标志，则删除不起作用。

Answer 3

在 React 函数组件中，确保使用 useCallback(() => {}) 钩子定义回调。如果你不这样做，回调将在每次重新渲染时都是不同的，并且 removeEventListener 方法将不起作用。

const scrollCallback = useCallback(() => { // do sth. });
window.addEventListener("scroll", scrollCallback, true);
window.removeEventListener("scroll", scrollCallback, true);

Answer 4

您正在两个调用中创建两个不同的函数。所以第二个函数与第一个函数没有任何关系，引擎可以删除该函数。改用函数的通用标识符。

var handler = function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          };
area.addEventListener('click', handler,true);

稍后您可以通过调用删除处理程序

area.removeEventListener('click', handler,true);

Answer 5

看起来没有人涵盖 JavaScript 规范的一部分，它现在为您提供了一种删除事件侦听器的机制没有使用removeEventListener。如果我们查看https://dom.spec.whatwg.org/#concept-event-listener，我们会发现在设置事件侦听器时有许多属性可以作为选项传递：

{
    type (a string)
    callback (an EventListener object, null by default)
    capture (a boolean, false by default)
    passive (a boolean, false by default)
    once (a boolean, false by default)
    signal (an AbortSignal object, null by default)
    removed (a boolean for bookkeeping purposes, false by default)
}

现在，该列表中有很多有用的属性，但为了删除事件侦听器，我们要使用的是 signal 属性（已添加到 DOM 级别 3 in late 2020），因为它让我们告诉 JS 引擎通过使用 AbortController 删除事件侦听器，而不必费心保留对确切处理函数和侦听器选项的引用“因为否则 removeEventListener 甚至无法正常工作”：

const areaListener = new AbortController();

area.addEventListener(
  `click`,
  ({clientX: x, clientY: y}) => {
    app.addSpot(x, y);
    app.addFlag = 1;
  },
  areaListener
);

（我们利用了 areaListener 等同于 { signal: ... } 对象这一事实，在任何其他事件侦听器选项属性中没有重叠）

现在，当需要删除该事件侦听器时，我们只需运行：

areaListener.abort()

完成：JS 引擎将中止并清理我们的事件侦听器。不保留对处理函数的引用，不确保我们调用 removeEventListener 时使用与我们调用 addEventListener 时完全相同的功能和属性：我们只是用一个无参数的中止调用取消监听器。

当然，还要注意，如果我们想这样做“因为我们只希望处理程序触发一次”，那么我们甚至不需要这样做, 我们可以只用 { once: true } 创建一个事件监听器，JS 会处理剩下的事情。无需删除代码。

area.addEventListener(
  `click`,
  () => app.bootstrapSomething(),
  { once: true }
);

Answer 6

要删除它，将函数存储在一个变量中或简单地使用一个命名函数并将该函数传递给 removeEventListener 调用：

function areaClicked(event) {
    app.addSpot(event.clientX, event.clientY);
    app.addFlag = 1;
}

area.addEventListener('click', areaClicked, true);
// ...
area.removeEventListener('click', areaClicked, true);

Answer 7

如果要将局部变量传递给事件侦听器调用的函数，可以在函数内部定义函数（以获取局部变量）并在函数本身中传递函数名称。例如，让我们从添加带有 app 的事件侦听器作为局部变量的函数内部开始。您可以在此函数中编写一个函数，例如，

function yourFunction () {
    var app;

    function waitListen () {
        waitExecute(app, waitListen);
    }

    area.addEventListener('click', waitListen, true);
}

然后，当调用 waitExecute 时，您就拥有了删除它所需的内容。

function waitExecute (app, waitListen) {
    ... // other code
    area.removeEventListener('click', waitListen, true);
}

Answer 8

首先定义您的事件处理程序，

接着

area.addEventListener('click',handler);
area.removeEventListener('click',handler);

Answer 9

这是我最终做的，但它在路由类中，但应该不会有太大区别，我希望事件监听器不会在每次调用 afterModel() 时累积，但还需要参数和范围，以便每次都更改模型.

export default class iFrameRoute extends Route {

      afterModel(model) {

           this.initFrame = function(event) {  
    
               alert("I am being called");

               window.removeEventListener("message",  this.route.test); 

           }.bind({route: this, data: model});

           window.addEventListener("message",  this.initFrame ); 
       } 
}

Answer 10

我最近遇到了同样的问题。我找到的一个合理的解决方案是从 HTMLElement 类中删除元素上的属性“onclick”。

假设您已经从 DOM 中获取组件 - 使用文档.getElementById要么文档查询选择器- 你可以试试那个代码：

js

const element = document.getElementById("myelement");
element.attributes.removeNamedItem('onclick');

例子

<div onClick="memoryGame.flipCard(this)">
   .... // children elements
</div>

我知道这不是最好的解决方案，但它确实有效！

我希望我能帮助你。

干杯!

PS：请给我一个“有用的答案”......谢谢：D

Answer 11

同时在数组中添加函数存储并为我删除通过地图工作

const [functionObjects, setfunctionObjects] = useState([]);

const addListener = (beforeUnloadListener) =>{ 
    setfunctionObjects([...nano, beforeUnloadListener]);
    addEventListener("beforeunload", beforeUnloadListener, {capture: true});
};

const removeListener = (beforeUnloadListener) => { 
    functionObjects.map((item) => {
    removeEventListener("beforeunload", item, {capture: true});});
};

Answer 12

在反应的情况下我们可以用使用引用()将我们的侦听器函数存储在当前属性中。因此，在重新渲染和删除侦听器的情况下，它将保持对该函数的相同引用。

const handleWindowClick = useRef(() => {
    console.log("window clicked");
  });



// for attaching event listener
 window.addEventListener("click", handleWindowClick.current);
 
 // for detaching event listener
 window.removeEventListener("click", handleWindowClick.current);