覆盖已附加到事件的函数

Question

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

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

buttonEl.addEventListener('click', orFn);

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

但是，当我单击按钮时，仍会调用旧功能。我已经看到了这个stackoverflow。我不能使用函数包装器。而且我想了解为什么这不起作用。

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

谢谢。

Answer 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);

<button>button</button>

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

// 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
});

<button>button</button>

Answer 2

使用bind（）的一种方法。

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

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

btn.addEventListener('click', orFn);

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

orFn.bind(orFn)

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