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

Question

我目前正在尝试通过单击按钮删除事件侦听器（请参阅下面的代码）但它永远不会起作用，我知道我应该使用相同的函数来取消事件（此处为 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

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

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

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

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 无效有多种原因：

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

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

How can I remove an event listener in JavaScript?

javascript

dom