覆盖已附加到事件的函数答案

【问题标题】：Override a function already attached to an event覆盖已附加到事件的函数
【发布时间】：2020-03-10 16:07:05
【问题描述】：

我想覆盖已附加到事件的函数。像这样：

let orFn = () => {
  console.log('old');
};

buttonEl.addEventListener('click', orFn);

orFn = () => {
  console.log('new');
};

但是，当我单击按钮时，仍会调用旧函数。我见过这个stackoverflow。在我的情况下，我不能使用函数包装器。我想了解为什么这不起作用。

我的代码可在此处进行测试：jsfiddle。

【问题讨论】：

它不起作用，因为您设置了对函数的引用。仅仅因为您稍后重新定义了引用并不意味着 addEventListener 捕获的引用已更改。旧功能不会神奇地消失。您可以删除一个处理程序并添加一个新的。
所以旧的引用绑定到 addEventListener，现在有办法改变它吗？
重新定义一个引用不会改变它在别处的值——就像写let foo = () => "bar"; let bar = foo; foo = () => "plugh"; bar 在定义bar 时得到一个对foo 值的引用。更改 foo 对 bar 的引用的影响为零。您可以删除处理程序并添加一个新的。您可以保留旧的并添加新的。你可以包装addEventListener 并做任何你想做的事情。但是 JS 语义就是 JS 语义。
@DaveNewton 谢谢。现在很清楚了。

标签： javascript dom-events

【解决方案1】：

一种方法是删除第一个侦听器，然后添加另一个侦听器

let orFn = () => {
  console.log('old');
};

let orFnNew = () => {
  console.log('new');
};

var buttonEl = document.querySelector('button')

buttonEl.addEventListener('click', orFn);

// remove old listener
buttonEl.removeEventListener('click', orFn);

// add another one
buttonEl.addEventListener('click', orFnNew);

&lt;button&gt;button&lt;/button&gt;

另一种方法是有一个侦听器，它可以在内部调用不同的函数。示例：

// button
const buttonEl = document.querySelector('button')

const orFn = () => {
  console.log('old');
};

const orFnNew = () => {
  console.log('new');
};

// function that will be called
let functionToCall = orFn;

buttonEl.addEventListener('click', (event) => { // single listener
  
  functionToCall.call(event); // call a function with event


  functionToCall = functionToCall === orFn ? orFnNew : orFn; // change function to be called
});

&lt;button&gt;button&lt;/button&gt;

【讨论】：

【解决方案2】：

使用 bind() 的一种方式。

const btn = document.getElementById('btn');

let orFn = () => {
  alert('old');
};

orFn = () => {
  alert('new');
};

orFn.bind(orFn)

btn.addEventListener('click', orFn);

这将与新功能绑定并在警报弹出窗口中显示new。

【讨论】：

嘿@MarcF。我已更改代码并将函数置于事件调用之上