如何更改 javascript 中的 addEventListener 回调函数

Question

如何更改 addEventListener 中的函数。

//how do I turn this
button.addEventListener('click', test)
//into this
button.addEventListener('click', test2)

我可以使用 js 库。我有一个想法，我可以使用 removeEventListener 然后添加另一个事件侦听器，但我不知道如何在 javascript.

中添加 eventListener

Answer 1

要在按钮上切换 EventListener，您可以完全按照您的建议进行操作

button.addEventListener("click", test)

button.removeEventListener("click", test)

button.addEventListener("click, test2)

EventListener 本质上是两种事物之一。

要使 test2 成为 EventListener，它只需要是这两件事之一。

选项 1：作为函数

function test2(event) {
    console.log(event)
}

button.addEventListener("click", test2)

选项 2：作为具有 handleEvent 函数的对象

const test2 = {
    "handleEvent": (event) => {
        console.log(event)
    } 
}

button.addEventListener("click", test2)

可在此处找到支持此操作的文档：

Answer 2

这可以通过委托来完成，只需将每次函数分配给一个变量，然后从回调中调用该变量，如下所示：

let fn = () => {
  alert('1');
  fn = () => alert('2');
};

button.addEventListener('click', function () {
  fn.apply(this, arguments);
});

<button id="button">OK</button>

How to change the addEventListener callback function in javascript