如何在javascript中更改addEventListener回调函数答案

【问题标题】：How to change the addEventListener callback function in javascript如何在javascript中更改addEventListener回调函数
【发布时间】：2022-07-12 06:16:36
【问题描述】：

如何更改 addEventListener 中的函数。

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

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

【问题讨论】：

你的想法试过了吗？
我不知道怎么只用javascript添加一个均匀监听器，不用写代码，所以javascript基本会自己生成
你认为它会自己编码？
不，我怎样才能使函数更改 addEventListener 函数，我正在尝试执行代码块中的内容
创建一个函数，接受元素作为一个参数，监听器类型作为另一个参数。然后在添加新的侦听器之前删除任何以前的侦听器。

标签： javascript function addeventlistener

【解决方案1】：

要在按钮上切换 EventListeners，您将完全按照您的建议进行操作

button.addEventListener("click", test)

button.removeEventListener("click", test)

button.addEventListener("click", test2)

EventListener 本质上是两件事之一。

接受事件对象作为输入参数的函数。
具有handleEvent 函数的对象，该函数接受事件对象作为输入参数。

要让 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)

可在此处找到支持此功能的文档：

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

【讨论】：

【解决方案2】：

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

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

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

&lt;button id="button"&gt;OK&lt;/button&gt;

【讨论】：