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

Question

我目前正在尝试通过单击按钮删除事件侦听器（请参见下面的代码），但它永远不会起作用，我知道我应该使用相同的 function 来取消事件（此处为 keyboardControl），但它似乎没有工作。 提前致谢

    <button class="start">start</button>
    <button class="stop">stop</button>

    const start = document.querySelector(".start")
    const stopbtn = document.querySelector(".stop")

    start.addEventListener("click", () => keyboardControl())
    stopbtn.addEventListener("click", () => {
        document.removeEventListener("keydown", keyboardControl)
    })

    function keyboardControl() {
        document.addEventListener("keydown", (e) => {
            switch(e.keyCode) {
                case 37: //left arrow key
                    console.log("left")
                    break
                case 39: 
                    console.log("right")
                    break
            }
        })
    }

Answer 1

您必须将相同的 function 传递给您传递给addEventListener的removeEventListener 。 您传递给addEventListener的 function 是

(e) => {
        switch(e.keyCode) {
            case 37: //left arrow key
                console.log("left")
                break
            case 39: 
                console.log("right")
                break
        }
    }

由于您没有在任何地方存储对它的引用，因此您无法删除它。 将 function 分配给变量并使用它来添加和删除它：

 const start = document.querySelector(".start") const stopbtn = document.querySelector(".stop") function handleKey(e) { switch (e.keyCode) { case 37: //left arrow key console.log("left") break case 39: console.log("right") break } } function keyboardControl() { document.addEventListener("keydown", handleKey); } start.addEventListener("click", () => keyboardControl()) stopbtn.addEventListener( "click", () => document.removeEventListener("keydown", handleKey) )

 <button class="start">start</button> <button class="stop">stop</button>

---

出于多种原因，删除keyboardControl不起作用：

• 它实际上不是您要删除的处理程序。 function 添加了另一个事件处理程序，但删除它不会自动删除它添加的处理程序。
• keyboardControl永远不会作为事件处理程序绑定到document 。