EventListener 不会在 function 调用中被删除

Question

当路由到不同的页面时，应该删除 eventListener，但事实并非如此。 发生这种情况可能有任何原因吗？ function 被调用。

componentDidMount() {
    window.document.addEventListener("keydown", (e) => {
        Resultaat(e.keyCode)
    })
}

componentWillUnmount() {
    window.document.removeEventListener("keydown", () => { })
}

Answer 1

添加/删除事件侦听器时，您需要提供相同的 function 您可以这样做

componentDidMount() {
 window.document.addEventListener("keydown", this.handleKeyDown)
}

而不是像删除它一样

componentWillUnmount() {
 window.document.removeEventListener("keydown", this.handleKeyDown)
}

您不能将匿名 function 传递给 window 事件监听器

希望能帮助到你

Answer 2

删除事件侦听器时，您应该传递与设置它时相同的侦听器实例，即：

var thisIsMyListener = (e) => {
        Resultaat(e.keyCode)
    };

componentDidMount() {
    window.document.addEventListener("keydown", thisIsMyListener)
}

componentWillUnmount() {
    window.document.removeEventListener("keydown", thisIsMyListener)
}

由于在 JS 中 function 也是 object，因此您应该始终提供相同的实例。

此外， () => {}声明了一个匿名function，它总是产生这个 function 的新实例。

Answer 3

您正在尝试解除与单击事件不同的方法的绑定，而不是以前分配的方法。 你可以想象你的匿名 function 在addEventListener方法中指向一个名为fn1的 function，然后你试图从同一个fn2中取消分配不同的 ZC1C425268E68385D1AB5074C17A94F。 因此它不会删除正确的。

看看我为你提供的这个例子：

https://jsfiddle.net/13oafx9b/

const button1 = document.getElementById('button');
const button2 = document.getElementById('button2');

function logSomething() {
    console.log('clicked');
}

button1.addEventListener('click', logSomething);

button2.addEventListener('click', () => {
    button1.removeEventListener('click', logSomething);
})

通过创建一个名为 function 您最终会得到一个指向 function“logSomething”引用的 memory 指针，并使用完全相同的指针来删除它。

编辑

在您的评论中，您正在创建另一个匿名 function e => { Resultaat(e.keyCode); } e => { Resultaat(e.keyCode); }你最终没有参考它。 如果你像doc.addEventListener("keydown", Resultaat); });这样直接调用它doc.addEventListener("keydown", Resultaat); }); 您将e作为第一个参数传递给Resultaat ，您可以在其中处理它的逻辑。 如果您想保持原样，使用e.keyCode事件调用Resultaat ，您必须将其包装在名为 function..

doc.addEventListener("keydown", printKeyCode); });

function printKeyCode(e) {
  Resultaat(e.keyCode);
}

再次： e => { Resultaat(e.keyCode); } e => { Resultaat(e.keyCode); }创建一个匿名的未命名 function，因为 removeEventListener function 没有引用它，所以它不能从事件监听器中分离出来。

Answer 4

您需要将相同的FUNCTION传递给removeEventListener ，就像您传递给addEventListener一样。 没有一个是模糊相似的。

分别声明监听器，然后你可以将它传递给两者。 这不是使用匿名函数的地方:)

var fn = (e) => Resultaat(e.keyCode)

window.document.addEventListener("keydown", fn)

window.document.removeEventListener("keydown", fn)

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

和

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

可能会有所帮助...